.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{ color: #555; background: #fff; font-size: 17px; font-weight: 500; font-style: italic; letter-spacing: 0.5px; padding: 0 0 0 27px; margin: 0; cursor: pointer; position: relative; z-index: 1; transition: all 0.3s ease 0s; } .radio-button label:before, .radio-button label:after{ content: ""; width: 20px; height: 20px; margin: auto; border-radius: 50%; border: 1px solid #555; position: absolute; top: 0; bottom: 0; left: 0; z-index: -1; transition: all 0.3s ease 0s; } .radio-button label:after{ background: #2cc550; border: none; opacity: 0; transform: scale(0.3); left: 5px; transition: opacity 0.3s,left 0.3s, transform 0.3s ease 0.2s; } .radio-button input[type=radio]:checked+label:before{ box-shadow: 0 0 3px #2cc550; } .radio-button input[type=radio]:checked+label:after{ opacity: 1; left: 0; transform: scale(0.65); } @media only screen and (max-width:767px){ .radio-button{ margin: 0 0 20px; } }