![](/build/_assets/logo-png-XGWSYHKJ.png)
Button by
Praashoo7
#e8e8e8
1.main_back { 2 position: absolute; 3 border-radius: 10px; 4 transform: rotate(90deg); 5 width: 11em; 6 height: 11em; 7 background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2); 8 z-index: -2; 9 box-shadow: inset 0px 0px 180px 5px #ffffff; 10} 11 12.main { 13 display: flex; 14 flex-wrap: wrap; 15 width: 14em; 16 align-items: center; 17 justify-content: center; 18 z-index: -1; 19} 20 21.card { 22 display: flex; 23 align-items: center; 24 justify-content: center; 25 width: 60px; 26 height: 60px; 27 border-top-left-radius: 10px; 28 background: lightgrey; 29 transition: 0.4s ease-in-out, 0.2s background-color ease-in-out, 30 0.2s background-image ease-in-out; 31 background: rgba(255, 255, 255, 0.596); 32 backdrop-filter: blur(5px); 33 border: 1px solid transparent; 34 -webkit-backdrop-filter: blur(5px); 35} 36 37.card .instagram { 38 opacity: 0; 39 transition: 0.2s ease-in-out; 40 fill: #cc39a4; 41} 42 43.card:nth-child(2) { 44 border-radius: 0px; 45} 46 47.card:nth-child(2) .twitter { 48 opacity: 0; 49 transition: 0.2s ease-in-out; 50 fill: #03a9f4; 51} 52 53.card:nth-child(3) { 54 border-top-right-radius: 10px; 55 border-top-left-radius: 0px; 56} 57 58.card:nth-child(3) .dribble { 59 opacity: 0; 60 transition: 0.2s ease-in-out; 61 fill: #ffb5d2; 62} 63 64.card:nth-child(4) { 65 border-radius: 0px; 66} 67 68.card:nth-child(4) .codepen { 69 opacity: 0; 70 transition: 0.2s ease-in-out; 71 fill: black; 72} 73 74.card:nth-child(5) { 75 border-radius: 0px; 76} 77 78.card:nth-child(5) .uiverse { 79 position: absolute; 80 margin-left: 0.2em; 81 margin-top: 0.2em; 82 opacity: 0; 83 transition: 0.2s ease-in-out; 84} 85 86.card:nth-child(6) { 87 border-radius: 0px; 88} 89 90.card:nth-child(6) .discord { 91 opacity: 0; 92 transition: 0.2s ease-in-out; 93 fill: #8c9eff; 94} 95 96.card:nth-child(7) { 97 border-bottom-left-radius: 10px; 98 border-top-left-radius: 0px; 99} 100 101.card:nth-child(7) .github { 102 opacity: 0; 103 transition: 0.2s ease-in-out; 104 fill: black; 105} 106 107.card:nth-child(8) { 108 border-radius: 0px; 109} 110 111.card:nth-child(8) .telegram { 112 opacity: 0; 113 transition: 0.2s ease-in-out; 114 fill: #29b6f6; 115} 116 117.card:nth-child(9) { 118 border-bottom-right-radius: 10px; 119 border-top-left-radius: 0px; 120} 121 122.card:nth-child(9) .reddit { 123 opacity: 0; 124 transition: 0.2s ease-in-out; 125} 126 127.main:hover { 128 width: 14em; 129 cursor: pointer; 130} 131 132.main:hover .main_back { 133 opacity: 0; 134} 135 136.main:hover .card { 137 margin: 0.2em; 138 border-radius: 10px; 139 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 140 border: 1px solid rgba(255, 255, 255, 0.3); 141 background: rgba(255, 255, 255, 0.2); 142} 143 144.main:hover .card:nth-child(5) { 145 border: transparent; 146} 147 148.main:hover .text { 149 opacity: 0; 150 z-index: -3; 151} 152 153.main:hover .instagram { 154 opacity: 1; 155} 156 157.main:hover .twitter { 158 opacity: 1; 159} 160 161.main:hover .dribble { 162 opacity: 1; 163} 164 165.main:hover .codepen { 166 opacity: 1; 167} 168 169.main:hover .uiverse { 170 opacity: 1; 171} 172 173.main:hover .discord { 174 opacity: 1; 175} 176 177.main:hover .github { 178 opacity: 1; 179} 180 181.main:hover .telegram { 182 opacity: 1; 183} 184 185.main:hover .reddit { 186 opacity: 1; 187} 188 189.card:nth-child(1):hover { 190 background-color: #cc39a4; 191} 192 193.card:nth-child(1):hover .instagram { 194 fill: white; 195} 196 197.card:nth-child(2):hover { 198 background-color: #03a9f4; 199} 200 201.card:nth-child(2):hover .twitter { 202 fill: white; 203} 204 205.card:nth-child(3):hover { 206 background-color: #ffb5d2; 207} 208 209.card:nth-child(3):hover .dribble { 210 fill: white; 211} 212 213.card:nth-child(4):hover { 214 background-color: #1e1f26; 215} 216 217.card:nth-child(4):hover .codepen { 218 fill: white; 219} 220 221.card:nth-child(5):hover { 222 animation: backgroundIMG 0.1s; 223 animation-fill-mode: forwards; 224} 225 226.card:nth-child(5):hover .uiverse #paint0_linear_501_142 stop { 227 stop-color: white; 228} 229 230.card:nth-child(5):hover .uiverse #paint1_linear_501_142 stop { 231 stop-color: white; 232} 233 234.card:nth-child(5):hover .uiverse #paint2_linear_501_142 stop { 235 stop-color: white; 236} 237 238@keyframes backgroundIMG { 239 100% { 240 background-image: linear-gradient(#bf66ff, #6248ff, #00ddeb); 241 } 242} 243 244.card:nth-child(6):hover { 245 background-color: #8c9eff; 246} 247 248.card:nth-child(6):hover .discord { 249 fill: white; 250} 251 252.card:nth-child(7):hover { 253 background-color: black; 254} 255 256.card:nth-child(7):hover .github { 257 fill: white; 258} 259 260.card:nth-child(8):hover { 261 background-color: #29b6f6; 262} 263 264.card:nth-child(8):hover .telegram > path:nth-of-type(1) { 265 fill: white; 266} 267 268.card:nth-child(8):hover .telegram > path:nth-of-type(2) { 269 fill: #29b6f6; 270} 271 272.card:nth-child(8):hover .telegram > path:nth-of-type(3) { 273 fill: #29b6f6; 274} 275 276.card:nth-child(9):hover { 277 background-color: rgb(255, 69, 0); 278} 279 280.card:nth-child(9) .reddit > g circle { 281 fill: rgb(255, 69, 0); 282} 283 284.card:nth-child(9) .reddit > g path { 285 fill: white; 286} 287 288.text { 289 position: absolute; 290 font-size: 0.7em; 291 transition: 0.4s ease-in-out; 292 color: black; 293 text-align: center; 294 font-weight: bold; 295 letter-spacing: 0.33em; 296 z-index: 3; 297} 298
40K views
40K views
mxxpower 23. June at 10:30
23. June at 10:30
can somebody tell me where i can find the ui in figma
Jimena0082 15. January at 18:59
15. January at 18:59
interesante
kennyotsu
Pro+
25. November 2023. at 14:0425. November 2023. at 14:04
Smooth! 🔥
Neztho05 15. November 2023. at 1:23
15. November 2023. at 1:23
Amazing
Variations
3 MIT License