Button by StealthWorm

#212121

1:root {
2  --main-color: #212121;
3  --gradient-color-1: #ffdb3b;
4  --gradient-color-2: #fe53bb;
5  --gradient-color-3: #8f51ea;
6  --text-glow-color: #ff1372;
7}
8
9.container {
10  all: unset;
11  height: 4rem;
12  width: 16rem;
13  position: relative;
14  border-radius: 20px;
15  border: double 3px transparent;
16  transition: 50ms;
17  background-image: linear-gradient(#212121, #212121),
18    linear-gradient(0, #ffdb3b 0%, #fe53bb 25%, #8f51ea 87%);
19  background-origin: border-box;
20  background-clip: content-box, border-box;
21  cursor: pointer;
22}
23
24.container:hover > strong {
25  transition: 300ms;
26  background-clip: text;
27  -webkit-background-clip: text;
28  color: transparent;
29  filter: brightness(1.75);
30  text-shadow: 2px 0 14px #fff;
31}
32
33.inner-container {
34  height: 100%;
35  width: 100%;
36  overflow: hidden;
37  position: relative;
38  border-radius: 18px;
39}
40
41strong,
42strong::before {
43  transition: 300ms;
44  display: flex;
45  height: 100%;
46  width: 100%;
47  align-items: center;
48  justify-content: center;
49  position: absolute;
50  font-size: 1.6rem;
51  letter-spacing: 5px;
52  z-index: 2;
53  background-clip: text;
54  -webkit-background-clip: text;
55  color: transparent;
56  text-shadow: 2px 2px 8px rgba(56, 127, 224, 0.4),
57    -2px -2px 8px rgba(254, 125, 255, 0.4);
58  background-image: linear-gradient(
59    0deg,
60    rgba(255, 142, 224, 1) 0%,
61    rgba(255, 29, 193, 1) 5%,
62    rgba(198, 72, 255, 1) 30%,
63    rgba(0, 0, 0, 1) 49%,
64    rgba(255, 255, 255, 1) 52%,
65    rgba(70, 148, 255, 1) 60%,
66    rgba(21, 59, 112, 1) 69%
67  );
68}
69
70strong::before {
71  text-shadow: -6px -6px 6px var(--text-glow-color);
72}
73
74#glow {
75  position: absolute;
76  inset: 0;
77  display: flex;
78  width: 100%;
79  height: 10rem;
80  max-height: 4rem;
81}
82
83.circle {
84  width: 100%;
85  height: 100%;
86  filter: blur(1.2rem);
87  animation: pulse 2s infinite alternate;
88  z-index: -1;
89}
90
91.circle:nth-of-type(1) {
92  background: linear-gradient(0, #ffdb3b 0%, #fe53bb 30%, #8f51ea 80%);
93}
94
95.fade {
96  position: absolute;
97  width: 100%;
98  min-height: 10rem;
99  top: -3rem;
100  height: 10rem;
101  background-image: linear-gradient(
102    to top,
103    rgba(236, 195, 11, 0.84) 15%,
104    rgba(255, 31, 184, 0.36) 40%,
105    rgb(43, 1, 54) 65%
106  );
107  z-index: 1;
108}
109
110.up-text {
111  display: flex;
112  justify-content: center;
113  position: relative;
114  height: 800px;
115  font-weight: 600;
116  letter-spacing: 6px;
117  perspective: 400px;
118  text-align: justify;
119}
120
121.crawl {
122  display: grid;
123  grid-template-columns: repeat(6, auto);
124  position: relative;
125  animation: crawl 20s linear infinite alternate;
126}
127
128.grid-item {
129  width: 60px;
130  height: 100%;
131  border: 1px solid #f96bcc;
132  box-shadow: 0 0 10px 4px #ff1fb8;
133}
134
135@keyframes crawl {
136  0% {
137    top: -200px;
138    transform: rotateX(30deg) translateZ(40px);
139  }
140  100% {
141    top: -510px;
142    transform: rotateX(25deg) translateZ(0px);
143  }
144}
145
146@keyframes pulse {
147  0% {
148    transform: scale(0.9);
149    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
150  }
151  100% {
152    transform: scale(1);
153    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
154  }
155}
156

:root {
  --main-color: #212121;
  --gradient-color-1: #ffdb3b;
  --gradient-color-2: #fe53bb;
  --gradient-color-3: #8f51ea;
  --text-glow-color: #ff1372;
}

.container {
  all: unset;
  height: 4rem;
  width: 16rem;
  position: relative;
  border-radius: 20px;
  border: double 3px transparent;
  transition: 50ms;
  background-image: linear-gradient(#212121, #212121),
    linear-gradient(0, #ffdb3b 0%, #fe53bb 25%, #8f51ea 87%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  cursor: pointer;
}

.container:hover > strong {
  transition: 300ms;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: brightness(1.75);
  text-shadow: 2px 0 14px #fff;
}

.inner-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 18px;
}

strong,
strong::before {
  transition: 300ms;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  position: absolute;
  font-size: 1.6rem;
  letter-spacing: 5px;
  z-index: 2;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 2px 2px 8px rgba(56, 127, 224, 0.4),
    -2px -2px 8px rgba(254, 125, 255, 0.4);
  background-image: linear-gradient(
    0deg,
    rgba(255, 142, 224, 1) 0%,
    rgba(255, 29, 193, 1) 5%,
    rgba(198, 72, 255, 1) 30%,
    rgba(0, 0, 0, 1) 49%,
    rgba(255, 255, 255, 1) 52%,
    rgba(70, 148, 255, 1) 60%,
    rgba(21, 59, 112, 1) 69%
  );
}

strong::before {
  text-shadow: -6px -6px 6px var(--text-glow-color);
}

#glow {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 10rem;
  max-height: 4rem;
}

.circle {
  width: 100%;
  height: 100%;
  filter: blur(1.2rem);
  animation: pulse 2s infinite alternate;
  z-index: -1;
}

.circle:nth-of-type(1) {
  background: linear-gradient(0, #ffdb3b 0%, #fe53bb 30%, #8f51ea 80%);
}

.fade {
  position: absolute;
  width: 100%;
  min-height: 10rem;
  top: -3rem;
  height: 10rem;
  background-image: linear-gradient(
    to top,
    rgba(236, 195, 11, 0.84) 15%,
    rgba(255, 31, 184, 0.36) 40%,
    rgb(43, 1, 54) 65%
  );
  z-index: 1;
}

.up-text {
  display: flex;
  justify-content: center;
  position: relative;
  height: 800px;
  font-weight: 600;
  letter-spacing: 6px;
  perspective: 400px;
  text-align: justify;
}

.crawl {
  display: grid;
  grid-template-columns: repeat(6, auto);
  position: relative;
  animation: crawl 20s linear infinite alternate;
}

.grid-item {
  width: 60px;
  height: 100%;
  border: 1px solid #f96bcc;
  box-shadow: 0 0 10px 4px #ff1fb8;
}

@keyframes crawl {
  0% {
    top: -200px;
    transform: rotateX(30deg) translateZ(40px);
  }
  100% {
    top: -510px;
    transform: rotateX(25deg) translateZ(0px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  }
}

Toggle prefixes

185 views

Copy to Figma

185 views

Comments

No variations yet

MIT License

Copyright - 2024 StealthWorm (thierry) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.