.radio-list{ text-align: center; padding: 0; margin: 0; list-style: none; } .radio-button{ margin: 0 5px; display: inline-block; position: relative; } .radio-button input[type=radio]{ margin: auto; visibility: hidden; position: absolute; left: 0; top: 0; } .radio-button label{ background: #999; width: 30px; height: 30px; cursor: pointer; border-radius: 50%; position: relative; z-index: 1; transition: all .3s ease-in-out; } .radio-button label:before, .radio-button label:after{ content: ""; background: #fff; width: 15px; height: 15px; border-radius: 50%; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); transform: translateX(-50%) translateY(-50%) scale(0); position: absolute; top: 50%; left: 50%; transition: all .4s; } .radio-button label:after{ background: #fff; opacity: 0; transform: translateX(-50%) translateY(-50%) scale(2); z-index: -1; transition: all .5s; } .radio-button label:hover, .radio-button input[type=radio]:checked+label{ background-color: red; } .radio-button input[type=radio]:checked+label:before{ transform: translateX(-50%) translateY(-50%) scale(1); } .radio-button input[type=radio]:checked+label:after{ opacity: 1; transform: translateX(-50%) translateY(-50%) scale(0.5); }