Radio by radwakhalil22
This radio was created for CSS from the future
#212121
1.radio-input #neonShadow { 2 height: 30px; 3 width: 30px; 4 border: none; 5 border-radius: 50px; 6 background-color: rgba(5, 19, 16, 0.3); 7 animation: glow 1s infinite; 8 transition: 0.5s; 9 accent-color: black; 10 appearance: none; 11 background-size: contain; 12} 13 14#neonShadow[type='radio']:after { 15 width: 100%; 16 height: 100%; 17 border-radius: 15px; 18 position: relative; 19 content: ''; 20 display: inline-block; 21 visibility: visible; 22} 23 24#neonShadow[type='radio']:checked:after { 25 width: 100%; 26 height: 100%; 27 border-radius: 50%; 28 position: relative; 29 background-color: white; 30 content: ''; 31 display: inline-block; 32 visibility: visible; 33} 34 35.span { 36 display: block; 37 width: 100%; 38 height: 100%; 39 font-family: Arial, Helvetica, sans-serif; 40 font-weight: 700; 41 padding-top: 15%; 42 padding-right: 2.5%; 43 margin-right: 0px; 44 font-size: 1.2rem; 45 transition: 0.3s; 46 opacity: 0; 47} 48 49.span:hover { 50 transition: 0.3s; 51 opacity: 1; 52 font-weight: 700; 53} 54 55#neonShadow:hover { 56 transform: scale(0.9); 57 background-color: #c3bacc; 58 transition: 0.5s; 59} 60 61@keyframes glow { 62 0% { 63 box-shadow: 5px 5px 20px rgb(93, 52, 168),-5px -5px 20px rgb(93, 52, 168); 64 } 65 66 50% { 67 box-shadow: 5px 5px 20px rgb(81, 224, 210),-5px -5px 20px rgb(81, 224, 210) 68 } 69 70 100% { 71 box-shadow: 5px 5px 20px rgb(93, 52, 168),-5px -5px 20px rgb(93, 52, 168) 72 } 73} 74 75
860 views
860 views
MIT License