91 views
1.radio-input { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5} 6 7.radio-input input { 8 appearance: none; 9 width: 2em; 10 height: 2em; 11 background-color: #171717; 12 box-shadow: inset 2px 5px 10px rgb(5, 5, 5); 13 border-radius: 50%; 14 transition: .4s ease-in-out; 15} 16 17.radio-input input:hover { 18 scale: 1.2; 19 cursor: pointer; 20 box-shadow: none; 21} 22 23.radio-input .circle { 24 position: relative; 25 top: 0.01em; 26 left: -1.1em; 27 width: 0.6em; 28 height: 0.6em; 29 background-color: yellow; 30 scale: 0; 31 border-radius: 10px; 32 transition: .4s ease-in-out; 33} 34 35.radio-input input:checked { 36 box-shadow: none; 37 border: 1px solid yellow; 38} 39 40.radio-input input:checked + .circle { 41 transform: rotate(360deg); 42 scale: 1; 43} 44 45
MIT License