Ember Primary Button

01.btn-wrapper {
02  --color: #b5faff31;
03  --txt-color: #283a3b;
04  --txt-color-2: #283a3b;
05  --point-size: 8px;
06  --point-color: #ffffff;
07  --line-color: #00000015;
08  --line-style: solid;
09  --line-weight: 1px;
10  --anim-speed: 1s;
11
12  position: relative;
13  display: grid;
14  place-items: center;
15  padding: 1.5rem 5rem;
16  min-width: 160px;
17  min-height: 48px;
18
19  user-select: none;
20}
21
22.txt-secondary {
23  position: absolute;
24  bottom: -2rem;
25  font:
26    400 0.75em "Inter",
27    sans-serif;
28  color: #0006;
29  font-style: italic;
30  will-change: opacity;
31  transition: opacity calc(var(--anim-speed, 1s) * 0.5) ease;
32  opacity: 1;
33}
34#hint2 {
35  opacity: 0;
36}
37
38.btn {
39  filter: drop-shadow(0 6px 2px #00000055) drop-shadow(0 14px 4px #00000055)
40    drop-shadow(0 32px 8px #00000055) drop-shadow(0 64px 16px #00000055);
41
42  position: absolute;
43  display: flex;
44  align-items: center;
45  justify-content: center;
46  cursor: pointer;
47  border: none;
48  background: none;
49  width: 100%;
50  height: 100%;
51}
52
53.txt-box {
54  position: absolute;
55  display: grid;
56  place-items: center;
57  text-wrap: nowrap;
58  inset: 0 0%;
59  overflow: clip;
60  will-change: inset, filter;
61  transition: filter 0.25s ease;
62  animation: frame-half calc(var(--anim-speed, 1s) * 0.5) forwards;
63}
64
65.txt-box::after {
66  content: "";
67  position: absolute;
68  inset: var(--point-size, 8px);
69  background: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #fff 20%);
70  mix-blend-mode: hard-light;
71  background-size: 440%;
72  transition: background-size 0.4s ease-in;
73  filter: blur(1px);
74  z-index: 3;
75  opacity: 0.1;
76}
77
78.txt {
79  position: absolute;
80  padding: 1rem 2rem;
81
82  z-index: 2;
83  font:
84    500 1.3em "Inter",
85    sans-serif;
86  color: var(--txt-color, #15104c);
87
88  will-change: opacity, display, text-shadow;
89
90  text-shadow:
91    0 -1px 1px #ffffff60,
92    0 2px 1px #00000015,
93    0 4px 2px #00000015,
94    0 8px 4px #00000015,
95    0 16px 8px #00000015;
96}
97.txt:last-child {
98  color: var(--txt-color-2, #15104c);
99  opacity: 0;
100  animation: none;
101}
102
103.frame {
104  position: absolute;
105  inset: 0 0%;
106  z-index: 1;
107  border: var(--line-style, solid) var(--line-weight, 1px)
108    var(--line-color, #000000);
109  background-color: var(--color, #f9d323);
110  transition-delay: calc(var(--anim-speed, 1s) * 0.5);
111  box-shadow: inset 0 1px 4px 1px #fff5;
112  animation: frame-half calc(var(--anim-speed, 1s) * 0.5) forwards;
113}
114
115.point {
116  position: absolute;
117  box-sizing: border-box;
118  width: var(--point-size, 8px);
119  aspect-ratio: 1;
120  border-radius: 25%;
121  border: solid var(--line-weight, 1px) var(--line-color, #000000);
122  background-color: var(--point-color, #fff);
123  background-image: radial-gradient(circle at 50% 120%, #0005, #ffff);
124
125  &.top {
126    top: calc(var(--point-size, 8px) * -0.5);
127  }
128  &.bottom {
129    bottom: calc(var(--point-size, 8px) * -0.5);
130  }
131  &.left {
132    left: calc(var(--point-size, 8px) * -0.5);
133  }
134  &.right {
135    right: calc(var(--point-size, 8px) * -0.5);
136  }
137}
138
139.btn:hover {
140  .txt {
141    animation: txt-out calc(var(--anim-speed, 1s) * 0.5) forwards;
142  }
143  .txt:last-child {
144    animation: txt-in calc(var(--anim-speed, 1s) * 0.5) forwards;
145  }
146
147  .txt-box {
148    animation: frame var(--anim-speed, 1s) ease;
149
150    &::after {
151      background-size: 700%;
152    }
153  }
154
155  .frame {
156    animation: frame var(--anim-speed, 1s) ease;
157  }
158
159  ~ #hint1 {
160    opacity: 0;
161  }
162  ~ #hint2 {
163    opacity: 1;
164  }
165}
166
167@keyframes txt-in {
168  90% {
169    opacity: 0;
170  }
171  100% {
172    opacity: 1;
173  }
174}
175@keyframes txt-out {
176  50% {
177    opacity: 1;
178  }
179  100% {
180    opacity: 0;
181  }
182}
183
184@keyframes frame-half {
185  0% {
186    inset: 0 50%;
187  }
188  100% {
189    inset: 0 0%;
190  }
191}
192@keyframes frame {
193  50% {
194    inset: 0 50%;
195  }
196}
197
198.btn::before {
199  content: "Address copied";
200  position: absolute;
201  inset: 0;
202  font:
203    400 1em "Inter",
204    sans-serif;
205  letter-spacing: 0.03em;
206  color: #000a;
207  z-index: -1;
208  filter: blur(16px);
209  opacity: 0;
210}
211
212.btn:active {
213  .txt-box {
214    filter: contrast(1.4) brightness(1.4);
215  }
216}
217
218.btn:focus {
219  &::before {
220    animation: appear calc(var(--anim-speed, 01s) * 1.5)
221      cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
222  }
223}
224
225@keyframes appear {
226  70% {
227    opacity: 0.75;
228    filter: blur(0px);
229  }
230  100% {
231    transform: translateY(-24px);
232  }
233}