Radio by shlomo20
This radio was created for CSS from the future
#212121
1.radio-input { 2 display: flex; 3 box-shadow: inset 0px 0px 10px 1px #ffffff; 4 border-radius: 25px; 5 border: 5px solid#000000; 6 overflow: hidden; 7} 8 9.radio-input:has(input:nth-child(1):checked) { 10 background: conic-gradient(from 300deg at 18% 50%, #e5719e, #7af4ec, #1a3271, #101a2e, #a859a0); 11} 12 13.radio-input:has(input:nth-child(2):checked) { 14 background: conic-gradient(from 300deg at 51% 50%, #e5719e, #7af4ec, #1a3271, #101a2e, #a859a0); 15} 16 17.radio-input:has(input:nth-child(3):checked) { 18 background: conic-gradient(from 300deg at 84% 50%, #e5719e, #7af4ec, #1a3271, #101a2e, #a859a0); 19} 20 21.radio-input input[type="radio"] { 22 appearance: none; 23 backdrop-filter: blur(16px); 24 background-color: transparent; 25 width: 3em; 26 height: 3em; 27 border-radius: 50%; 28 transform: translateY(-0.075em); 29 display: grid; 30 place-content: center; 31 margin: 10px; 32} 33 34.radio-input input[type="radio"]::before { 35 content: ""; 36 width: 0.5em; 37 height: 0.5em; 38 border-radius: 50%; 39 /* transform: scale(0); */ 40 transition: 120ms transform ease-in-out; 41 background-color: transparent; 42 box-shadow: 0px 0px 10px 1px #ffffff; 43 border: 1px solid #0000005d; 44} 45 46.radio-input input[type="radio"]:hover::before { 47 background-color: #7af4ec; 48 box-shadow: 0px 0px 10px 1px #7af4ec; 49} 50 51.radio-input input[type="radio"]:checked { 52 background: conic-gradient(from 300deg at 50% 50%, #e5719e, #7af4ec, #1a3271, #101a2e, #a859a0); 53} 54 55.radio-input input[type="radio"]:checked::before { 56 /* transform: scale(1); */ 57 width: 1em; 58 height: 1em; 59 background-color: #1e4ada94; 60 box-shadow: 0px 0px 30px 20px #a35a99; 61}
702 views
702 views
MIT License