<body>
    <div class="wrap">
        <label style="font-size: 22px;font-weight: bold;padding:10px; color: white;" >Radio Button</label>
        <br/>
    <label>
        <input type="radio" checked name="radio"> 
         <div  class="btn btn-sık"><span>Option 1</span></div> </label>
     <label >
        <input  type="radio"  name="radio"> 
       <div class="btn btn-sık"><span>Option 2</span></div></label>
      <br/>
    <label style="font-size: 22px;font-weight: bold;padding:10px;color: white;">Checkboxes</label>
           <br/>
    <label>
        <input type="checkbox" name="checkboxYannis"/>    
          <div class="btn btn-sık"><span>Option 1</span></div>
    </label>
    <label>
        <input type="checkbox" checked name="checkboxYannis"/>     
         <div class="btn btn-sık"><span>Option 2</span></div>
    </label>
    <label>
        <input type="checkbox" name="checkboxYannis"/>
        <div class="btn btn-sık"><span>Option 3</span></div>
    </label>

    </div>
    </body>
body{
    font-family: 'Ek Mukta', sans-serif;
    height: 100%;
    width: 100%;
    background: #212121;
}
.wrap{
    padding: 15px;
    background-color: #424242;
    width: 480px;
    height: 390px;
    border-radius: 12px;
    position: absolute; /*it can be fixed too*/
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    /*this to solve "the content will not be cut when the window is smaller than the content": */
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}
label {
    position: relative;
    display: inline-block;
    text-align: center;
}

.btn:hover {
    cursor: pointer !important;
}

.btn:active {
    box-shadow: 0 1px #666 !important;
    transform: translateY(2px) !important;
}
.btn {
    
    font-size: 15px;
    font-weight: bold;
    height: 35px;
    width: 100px;
    box-shadow: 0 3px #999;
    text-align: center;
}
.btn-sık {
    transition: all 0.2s ease;
    background-color: white ;
    border: 2px solid #f44336 !important;
    box-shadow: 0 3px #d32f2f !important;
    min-width: 150px;
    border-radius: 20px;
}


    btn-sık::selection{
        background: green;
    }

input[type="radio"] {
     position: absolute;
  visibility: hidden;
}
input[type="radio"] + div {
    position: relative;
}
input[type="radio"]:checked + div {
  background-color: #ef5350;
}
input[type="radio"]:checked + div>span {
  color: white;
}
input[type="radio"] + div>span {
position: relative;
top: 25%;}

input[type="checkbox"] {
     position: absolute;
  visibility: hidden;
}

input[type="checkbox"] + div {
    position: relative;
}
input[type="checkbox"]:checked + div {
  background-color: #ef5350;
}
input[type="checkbox"]:checked + div>span {
  color: white;
}
input[type="checkbox"] + div>span {
position: relative;
top: 25%;}

input[type="checkbox"]:checked + div::before {
        content:"✔";
    position: absolute;
    bottom: 18px;
    right: 0px;
    font-size: 21px;
    color: white;
}

input[type="radio"]:checked + div::before {
    font-family: FontAwesome;
    content: "\f08d";
    position: absolute;
    bottom: 31px;
    font-size: 21px;
    color: white;
    right: -5px;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    animation: fall 0.5s forwards;
}

@keyframes fall {
    100% {
        -webkit-transform: translate(-5px,5px) rotate(30deg);
        -moz-transform: translate(-5px,5px) rotate(30deg);
        -o-transform: translate(-5px,5px) rotate(30deg);
        -ms-transform: translate(-5px,5px) rotate(30deg);
        transform: translate(-5px,5px) rotate(30deg);
    }
}

@-moz-keyframes fall {
    100% {
        -webkit-transform: translate(-5px,5px) rotate(30deg);
        -moz-transform: translate(-5px,5px) rotate(30deg);
        -o-transform: translate(-5px,5px) rotate(30deg);
        -ms-transform: translate(-5px,5px) rotate(30deg);
        transform: translate(-5px,5px) rotate(30deg);
    }
}

@-webkit-keyframes fall {
     100% {
        -webkit-transform: translate(-5px,5px) rotate(30deg);
        -moz-transform: translate(-5px,5px) rotate(30deg);
        -o-transform: translate(-5px,5px) rotate(30deg);
        -ms-transform: translate(-5px,5px) rotate(30deg);
        transform: translate(-5px,5px) rotate(30deg);
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.