.demo{ background-color: #76271f; } .radio-button{ display: inline-block; position: relative; } .radio-button input[type=radio]{ margin: auto; visibility: hidden; position: absolute; left: 0; right: 0; bottom: 0; top: 0; } .radio-button label{ background: #fff; width: 25px; height: 25px; margin: 0; cursor: pointer; border-radius: 50%; box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15); display: block; overflow: hidden; position: relative; transition: all 0.3s ease; } .radio-button label:before{ content: ""; background: #1cbc2c; width: 60%; height: 60%; border-radius: 50%; transform: translate(200%); position: absolute; top: 5px; left: 5px; } .radio-button input[type=radio]:checked+label{ animation: wiggle .2s ease-out; } .radio-button input[type=radio]:checked+label:before{ transform: translate(0); animation: flyInRight .4s; } @keyframes wiggle{ 0%{ transform: translate(0); } 80%{ transform: translate(5px); } 100%{ transform: translate(0); } } @keyframes flyInRight{ 0%{ transform: translate(200%); } 50%{ transform: translate(200%); } 70%{ transform: translate(-50%); } 100%{ transform: translate(0); } } @media only screen and (max-width:767px){ .radio-button{ margin: 0 0 20px; } }