Radio by Tsiangana
#e8e8e8
1.radio-inputs { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 max-width: 350px; 6 -webkit-user-select: none; 7 -moz-user-select: none; 8 -ms-user-select: none; 9 user-select: none; 10} 11 12.radio-inputs > * { 13 margin: 6px; 14} 15 16.instagram:checked + .radio-tile { 17 border-color: #cc39a4; 18 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 19 color: #cc39a4; 20} 21 22.instagram:checked + .radio-tile:before { 23 transform: scale(1); 24 opacity: 1; 25 background-color: #cc39a4; 26 border-color: #cc39a4; 27} 28 29.instagram:checked + .radio-tile .radio-icon svg { 30 fill: #fff; 31} 32 33.instagram:checked + .radio-tile .radio-label { 34 color: #cc39a4; 35} 36 37.instagram:focus + .radio-tile { 38 background-color: #cc39a4; 39 border-color: #fff; 40 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc; 41} 42.instagram:checked + .radio-tile { 43 background-color: #cc39a4; 44 border-color: #fff; 45} 46 47.instagram:focus + .radio-tile:before { 48 transform: scale(1); 49 opacity: 1; 50} 51 52/* Twitter */ 53.twitter:checked + .radio-tile { 54 border-color: #03a9f4; 55 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 56 color: #03a9f4; 57} 58 59.twitter:checked + .radio-tile:before { 60 transform: scale(1); 61 opacity: 1; 62 background-color: #03a9f4; 63 border-color: #03a9f4; 64} 65 66.twitter:checked + .radio-tile .radio-icon svg { 67 fill: #fff; 68} 69 70.twitter:checked + .radio-tile .radio-label { 71 color: #03a9f4; 72} 73 74.twitter:focus + .radio-tile { 75 background-color: #03a9f4; 76 border-color: #fff; 77 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc; 78} 79.twitter:checked + .radio-tile { 80 background-color: #03a9f4; 81 border-color: #fff; 82} 83 84.twitter:focus + .radio-tile:before { 85 transform: scale(1); 86 opacity: 1; 87} 88/* discord */ 89.discord:checked + .radio-tile { 90 border-color: #8c9eff; 91 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 92 color: #8c9eff; 93} 94 95.discord:checked + .radio-tile:before { 96 transform: scale(1); 97 opacity: 1; 98 background-color: #8c9eff; 99 border-color: #8c9eff; 100} 101 102.discord:checked + .radio-tile .radio-icon svg { 103 fill: #fff; 104} 105 106.discord:checked + .radio-tile .radio-label { 107 color: #8c9eff; 108} 109 110.discord:focus + .radio-tile { 111 background-color: #8c9eff; 112 border-color: #fff; 113 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc; 114} 115.discord:checked + .radio-tile { 116 background-color: #8c9eff; 117 border-color: #fff; 118} 119 120.discord:focus + .radio-tile:before { 121 transform: scale(1); 122 opacity: 1; 123} 124 125.radio-tile { 126 display: flex; 127 flex-direction: column; 128 align-items: center; 129 justify-content: center; 130 width: 80px; 131 min-height: 80px; 132 border-radius: 0.5rem; 133 border: 2px solid #b5bfd9; 134 background-color: #fff; 135 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 136 transition: 0.15s ease; 137 cursor: pointer; 138 position: relative; 139} 140 141.instagram:hover { 142 border-color: #cc39a4; 143} 144.twitter:hover { 145 border-color: #03a9f4; 146} 147.discord:hover { 148 border-color: #8c9eff; 149} 150 151.radio-tile:hover:before { 152 transform: scale(1); 153 opacity: 1; 154} 155 156.radio-icon svg { 157 width: 2rem; 158 height: 2rem; 159} 160.instagram { 161 fill: #cc39a4; 162} 163.twitter { 164 fill: #03a9f4; 165} 166.discord { 167 fill: #8c9eff; 168} 169 170.radio-label { 171 color: #707070; 172 transition: 0.375s ease; 173 text-align: center; 174 font-size: 13px; 175} 176 177.radio-input { 178 clip: rect(0 0 0 0); 179 -webkit-clip-path: inset(100%); 180 clip-path: inset(100%); 181 height: 1px; 182 overflow: hidden; 183 position: absolute; 184 white-space: nowrap; 185 width: 1px; 186} 187
1.8K views
1.8K views
MIT License