Radio by watchakorn-18k
This radio was created for CSS from the future
#e8e8e8
1.radio-input { 2 scale: 2; 3} 4 5.radio-input input[type="radio"] { 6 position: absolute; 7 opacity: 0; 8 width: 0; 9 height: 0; 10} 11 12.radio-input label { 13 position: relative; 14 display: inline-block; 15 margin: 5px; 16 cursor: pointer; 17} 18 19.radio-input label::before { 20 content: ""; 21 display: inline-block; 22 box-sizing: border-box; 23 width: 20px; 24 height: 20px; 25 margin-right: 10px; 26 border-radius: 50%; 27 border: 1px solid #f35; 28 box-shadow: 0px 0px 5px -1px rgb(255, 51, 85) inset,0px 0px 5px -1px rgb(255, 51, 85); 29} 30 31.radio-input input[type="radio"]:checked + label::before { 32 background-color: #f35; 33} 34 35.radio-input ::after { 36 content: ""; 37 display: inline-block; 38 position: absolute; 39 top: 60%; 40 left: 60%; 41 transform: translate(-50%, -50%) scale(0); 42 width: 10px; 43 height: 10px; 44 border-radius: 50%; 45 background-image: radial-gradient( 46 farthest-corner at 40px 40px, 47 rgb(134, 14, 34) 80%, 48 rgb(20, 11, 116) 100%); 49 box-shadow: 0px 0px 5px -1px #f35 inset,0px 0px 5px -1px #f35; 50 scale: 1.2; 51 transition: transform 0.25s ease-in-out; 52} 53 54.radio-input label:hover::before { 55 background-image: radial-gradient( 56 farthest-corner at 40px 40px, 57 #f35 50%, 58 #43e 100%); 59 border: 0px; 60 box-shadow: 0px 0px 5px -1px #43e inset,0px 0px 5px -1px #43e; 61} 62 63.radio-input label:hover::after { 64 transform: translate(-50%, -50%) scale(1.5); 65} 66 67 68 69
562 views
562 views
MIT License