Radio by PRPraashoo7
#212121
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: 5px; 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 .plus1 { 24 position: relative; 25 top: 0.01em; 26 left: -1.45em; 27 width: 1.3em; 28 height: 0.2em; 29 background-color: red; 30 rotate: 45deg; 31 scale: 0; 32 border-radius: 5px; 33 transition: .4s ease-in-out; 34} 35 36.radio-input .plus2 { 37 position: relative; 38 width: 1.3em; 39 height: 0.2em; 40 background-color: red; 41 transform: rotate(90deg); 42 border-radius: 5px; 43 transition: .4s ease-in-out; 44} 45 46.radio-input input:checked { 47 box-shadow: none; 48} 49 50.radio-input input:checked + .plus1 { 51 transform: rotate(180deg); 52 scale: 1; 53}
15K views
MIT License