Button by Lucaasbre
This button was created for Button Mastery
#e8e8e8
1.container { 2 position: relative; 3 width: 300px; 4 height: 100px; 5 border-radius: 30px; 6 overflow: hidden; 7 cursor: pointer; 8} 9 10.button { 11 border: none; 12 width: 200%; 13 height: 100%; 14 background: linear-gradient( 15 75deg, 16 rgb(170, 55, 200) 10%, 17 rgb(235, 100, 130) 20%, 18 rgb(245, 95, 90) 40%, 19 rgb(245, 110, 30) 60%, 20 rgb(235, 100, 130) 80%, 21 rgb(170, 55, 200) 90% 22 ), 23 linear-gradient( 24 75deg, 25 rgb(170, 55, 200) 0%, 26 rgb(235, 100, 130) 20%, 27 rgb(245, 95, 90) 40%, 28 rgb(245, 110, 30) 60%, 29 rgb(235, 100, 130) 80%, 30 rgb(170, 55, 200) 100% 31 ); 32 background-size: 50% 100%; 33 animation: moveGradient 3s linear infinite paused; 34} 35 36.container:hover .button { 37 animation-play-state: running; 38} 39 40.container:active { 41 scale: 0.95; 42} 43 44@keyframes moveGradient { 45 0% { 46 background-position: 0 0; 47 } 48 100% { 49 background-position: 100% 0; 50 } 51} 52 53.span-text { 54 position: absolute; 55 z-index: 3; 56 width: 100%; 57 height: 100%; 58 text-align: center; 59 display: flex; 60 align-items: center; 61 justify-content: center; 62} 63 64.span-outside { 65 width: 300px; 66 height: 95px; 67 justify-content: center; 68 align-items: center; 69 display: flex; 70 border-radius: 30px; 71 border: 2px solid rgba(255, 255, 255, 0.7); 72 background-color: #ffffff10; 73 filter: blur(1px); 74 z-index: 3; 75} 76 77.span-text > svg { 78 position: relative; 79 width: 25px; 80 height: 25px; 81 margin-right: 5px; 82} 83 84.circles .circle { 85 position: absolute; 86 background-color: #fff; 87 width: 200px; 88 height: 200px; 89 border-radius: 50%; 90} 91 92.circles .circle:nth-child(1) { 93 position: absolute; 94 background-color: rgba(255, 255, 255, 0.2); 95 filter: blur(20px); 96 top: -80px; 97 left: 180px; 98} 99 100.circles .circle:nth-child(2) { 101 position: absolute; 102 background-color: rgba(255, 255, 255, 0.3); 103 border-radius: 0; 104 filter: blur(10px); 105 top: -10px; 106 left: -50px; 107} 108 109.circles .circle:nth-child(3) { 110 position: absolute; 111 background-color: rgba(255, 255, 255, 0.8); 112 border-radius: 10px 80px 80px 40px; 113 width: 60px; 114 height: 40px; 115 top: 30px; 116 left: 35px; 117 filter: blur(10px); 118} 119 120.circles .circle:nth-child(4) { 121 position: absolute; 122 background-color: #fff; 123 rotate: 10deg; 124 width: 40px; 125 height: 40px; 126 top: 60px; 127 left: 130px; 128 filter: blur(20px); 129} 130 131.circles .circle:nth-child(5) { 132 position: absolute; 133 background-color: #fff; 134 width: 70px; 135 height: 70px; 136 top: 25px; 137 left: 250px; 138 filter: blur(18px); 139} 140 141.circles .circle:nth-child(6) { 142 position: absolute; 143 background-color: #fff; 144 rotate: 10deg; 145 width: 40px; 146 height: 40px; 147 top: 30px; 148 left: 190px; 149 filter: blur(10px); 150} 151 152.circles .circle:nth-child(7) { 153 position: absolute; 154 background-color: transparent; 155 border-radius: 0 0 0 20px; 156 border-left: 2px solid #fff; 157 border-bottom: 2px solid #fff; 158 width: 210px; 159 height: 20px; 160 top: 0px; 161 left: 20px; 162 filter: blur(2px); 163} 164 165.circles .circle:nth-child(8) { 166 position: absolute; 167 background-color: transparent; 168 border-radius: 0; 169 border-bottom: 6px solid #fff; 170 width: 60px; 171 height: 20px; 172 top: 60px; 173 left: 60px; 174 filter: blur(5px); 175} 176 177.circles .circle:nth-child(9) { 178 position: absolute; 179 background-color: transparent; 180 border-radius: 0 20px 0 0; 181 border-right: 2px solid #fff; 182 border-top: 2px solid #fff; 183 width: 50px; 184 height: 20px; 185 top: 19px; 186 right: 20px; 187 filter: blur(2px); 188} 189 190.circles .circle:nth-child(10) { 191 position: absolute; 192 background-color: transparent; 193 border-radius: 0 20px; 194 border-left: 2px solid #fff; 195 border-bottom: 2px solid #fff; 196 width: 30px; 197 height: 50px; 198 bottom: 10px; 199 right: -10px; 200 filter: blur(2px); 201} 202 203.circles .circle:nth-child(11) { 204 position: absolute; 205 background-color: transparent; 206 border-radius: 0 20px 0 0; 207 border-right: 2px solid #fff; 208 border-top: 2px solid #fff; 209 width: 50px; 210 height: 20px; 211 bottom: 1px; 212 right: 20px; 213 filter: blur(2px); 214} 215 216.circles .circle:nth-child(12) { 217 position: absolute; 218 background-color: transparent; 219 border-radius: 0 0 0 20px; 220 border-left: 2px solid #fff; 221 border-bottom: 2px solid #fff; 222 width: 210px; 223 height: 20px; 224 bottom: 20px; 225 left: 20px; 226 filter: blur(2px); 227} 228 229.circles .circle:nth-child(13) { 230 position: absolute; 231 background-color: transparent; 232 border-radius: 0 20px 0 0; 233 border-right: 2px solid #fff; 234 border-top: 2px solid #fff; 235 width: 20px; 236 height: 50px; 237 top: 10px; 238 left: 0px; 239 filter: blur(2px); 240} 241 242.circles .circle:nth-child(14) { 243 position: absolute; 244 background-color: white; 245 border-radius: 0 0 80px 40px; 246 width: 90px; 247 height: 20px; 248 top: 0px; 249 left: 20px; 250 filter: blur(9px); 251} 252 253.circles .circle:nth-child(15) { 254 position: absolute; 255 background-color: transparent; 256 border-radius: 0; 257 border-bottom: 6px solid #fff; 258 width: 60px; 259 height: 20px; 260 top: 0px; 261 left: 30px; 262 filter: blur(3px); 263} 264
121 views
121 views
MIT License