Radio by Yaya12085
#212121
1.radio-input { 2 display: flex; 3 flex-direction: row; 4 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 5 font-size: 16px; 6 font-weight: 600; 7 color: white; 8} 9 10.radio-input input[type="radio"] { 11 display: none; 12} 13 14.radio-input label { 15 display: flex; 16 align-items: center; 17 padding: 10px; 18 border: 1px solid #ccc; 19 background-color: #212121; 20 border-radius: 5px; 21 margin-right: 12px; 22 cursor: pointer; 23 position: relative; 24 transition: all 0.3s ease-in-out; 25} 26 27.radio-input label:before { 28 content: ""; 29 display: block; 30 position: absolute; 31 top: 50%; 32 left: 0; 33 transform: translate(-50%, -50%); 34 width: 10px; 35 height: 10px; 36 border-radius: 50%; 37 background-color: #fff; 38 border: 2px solid #ccc; 39 transition: all 0.3s ease-in-out; 40} 41 42.radio-input input[type="radio"]:checked + label:before { 43 background-color: green; 44 top: 0; 45} 46 47.radio-input input[type="radio"]:checked + label { 48 background-color: royalblue; 49 color: #fff; 50 border-color: rgb(129, 235, 129); 51 animation: radio-translate 0.5s ease-in-out; 52} 53 54@keyframes radio-translate { 55 0% { 56 transform: translateX(0); 57 } 58 59 50% { 60 transform: translateY(-10px); 61 } 62 63 100% { 64 transform: translateX(0); 65 } 66} 67
3.2K views
3.2K views
MIT License