1.voltage-button {
2  position: relative;
3}
4
5.voltage-button button {
6  color: white;
7  background: #0D1127;
8  padding: 1rem 3rem 1rem 3rem;
9  border-radius: 5rem;
10  border: 5px solid #5978F3;
11  font-size: 1.2rem;
12  line-height: 1em;
13  letter-spacing: 0.075em;
14  transition: background 0.3s;
15}
16
17.voltage-button button:hover {
18  cursor: pointer;
19  background: #0F1C53;
20}
21
22.voltage-button button:hover + svg, .voltage-button button:hover + svg + .dots {
23  opacity: 1;
24}
25
26.voltage-button svg {
27  display: block;
28  position: absolute;
29  top: -0.75em;
30  left: -0.25em;
31  width: calc(100% + 0.5em);
32  height: calc(100% + 1.5em);
33  pointer-events: none;
34  opacity: 0;
35  transition: opacity 0.4s;
36  transition-delay: 0.1s;
37}
38
39.voltage-button svg path {
40  stroke-dasharray: 100;
41  filter: url("#glow");
42}
43
44.voltage-button svg path.line-1 {
45  stroke: #f6de8d;
46  stroke-dashoffset: 0;
47  animation: spark-1 3s linear infinite;
48}
49
50.voltage-button svg path.line-2 {
51  stroke: #6bfeff;
52  stroke-dashoffset: 500;
53  animation: spark-2 3s linear infinite;
54}
55
56.voltage-button .dots {
57  opacity: 0;
58  transition: opacity 0.3s;
59  transition-delay: 0.4s;
60}
61
62.voltage-button .dots .dot {
63  width: 1rem;
64  height: 1rem;
65  background: white;
66  border-radius: 100%;
67  position: absolute;
68  opacity: 0;
69}
70
71.voltage-button .dots .dot-1 {
72  top: 0;
73  left: 20%;
74  animation: fly-up 3s linear infinite;
75}
76
77.voltage-button .dots .dot-2 {
78  top: 0;
79  left: 55%;
80  animation: fly-up 3s linear infinite;
81  animation-delay: 0.5s;
82}
83
84.voltage-button .dots .dot-3 {
85  top: 0;
86  left: 80%;
87  animation: fly-up 3s linear infinite;
88  animation-delay: 1s;
89}
90
91.voltage-button .dots .dot-4 {
92  bottom: 0;
93  left: 30%;
94  animation: fly-down 3s linear infinite;
95  animation-delay: 2.5s;
96}
97
98.voltage-button .dots .dot-5 {
99  bottom: 0;
100  left: 65%;
101  animation: fly-down 3s linear infinite;
102  animation-delay: 1.5s;
103}
104
105@keyframes spark-1 {
106  to {
107    stroke-dashoffset: -1000;
108  }
109}
110
111@keyframes spark-2 {
112  to {
113    stroke-dashoffset: -500;
114  }
115}
116
117@keyframes fly-up {
118  0% {
119    opacity: 0;
120    transform: translateY(0) scale(0.2);
121  }
122
123  5% {
124    opacity: 1;
125    transform: translateY(-1.5rem) scale(0.4);
126  }
127
128  10%, 100% {
129    opacity: 0;
130    transform: translateY(-3rem) scale(0.2);
131  }
132}
133
134@keyframes fly-down {
135  0% {
136    opacity: 0;
137    transform: translateY(0) scale(0.2);
138  }
139
140  5% {
141    opacity: 1;
142    transform: translateY(1.5rem) scale(0.4);
143  }
144
145  10%, 100% {
146    opacity: 0;
147    transform: translateY(3rem) scale(0.2);
148  }
149}
150