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}