Radio by aadium
This radio was created for CSS from the future
#212121
1.container input[type="radio"] { 2 position: absolute; 3 opacity: 0; 4 cursor: pointer; 5 height: 0; 6 width: 0; 7} 8 9.container { 10 display: inline-block; 11 position: relative; 12 cursor: pointer; 13 font-size: 17px; 14 width: 5em; 15 height: 2.5em; 16 user-select: none; 17 border: none; 18} 19 20.selected { 21 position: absolute; 22 top: 0; 23 left: 0; 24 width: 100%; 25 height: 100%; 26} 27 28#leftradio { 29 border-bottom-left-radius: 2.5em; 30 border-top-left-radius: 2.5em; 31 border-bottom-right-radius: 0; 32 border-top-right-radius: 0; 33 border: 3px solid #78cce2; 34 background-color: transparent; 35 transition: 0.2s ease-in; 36} 37 38#rightradio { 39 border-bottom-right-radius: 2.5em; 40 border-top-right-radius: 2.5em; 41 border-bottom-left-radius: 0; 42 border-top-left-radius: 0; 43 border: 3px solid #defe47; 44 background-color: transparent; 45 transition: 0.2s linear; 46} 47 48#middleradio { 49 border: 3px solid #f887ff; 50 background-color: transparent; 51 transition: 0.2s linear; 52} 53 54.selected:after { 55 content: ''; 56 position: absolute; 57 background-color: 78cce2; 58 width: 100%; 59 height: 90%; 60 transform: scale(0); 61 transition: 0.2s ease-out; 62} 63 64#leftradio:hover { 65 border-bottom-left-radius: 2.5em; 66 border-top-left-radius: 2.5em; 67 border-bottom-right-radius: 0; 68 border-top-right-radius: 0; 69 border: 3px solid #78cce2; 70 background-color: #78cce2; 71} 72 73#leftradio::after { 74 top: 0%; 75 height: 100%; 76 border-bottom-left-radius: 2.5em; 77 border-top-left-radius: 2.5em; 78 border-bottom-right-radius: 0; 79 border-top-right-radius: 0; 80 border: none; 81 background-color: #78cce2; 82 box-shadow: 0em 0em 4em 0.1em #78cce2; 83} 84 85#rightradio:hover { 86 border-bottom-right-radius: 2.5em; 87 border-top-right-radius: 2.5em; 88 border-bottom-left-radius: 0; 89 border-top-left-radius: 0; 90 border: 3px solid #defe47; 91 background-color: #defe47; 92} 93 94#rightradio::after { 95 left: -3%; 96 top: -1%; 97 border-bottom-right-radius: 2.5em; 98 border-top-right-radius: 2.5em; 99 border-bottom-left-radius: 0; 100 border-top-left-radius: 0; 101 border: 3px solid #defe47; 102 background-color: #defe47; 103 box-shadow: 0em 0em 4em 0.1em #defe47; 104} 105 106#middleradio:hover { 107 border: 3px solid #f887ff; 108 background-color: #f887ff; 109} 110 111#middleradio::after { 112 left: -3%; 113 top: -3%; 114 border: 3px solid #f887ff; 115 background-color: #f887ff; 116 box-shadow: 0em 0em 4em 0.1em #f887ff; 117} 118 119.container input[type="radio"]:checked ~ .selected:after { 120 transform: scale(1); 121} 122
984 views
984 views
MIT License