1.button {
2  position: relative;
3  z-index: 0;
4  width: 240px;
5  height: 56px;
6  text-decoration: none;
7  font-size: 14px;
8  font-weight: bold;
9  color: #00135C;
10  letter-spacing: 2px;
11  transition: all .3s ease;
12  border: none;
13  background: transparent;
14}
15
16.button__text {
17  display: flex;
18  justify-content: center;
19  align-items: center;
20  width: 100%;
21  height: 100%;
22}
23
24.button::before,
25.button::after,
26.button__text::before,
27.button__text::before {
28  content: '';
29  position: absolute;
30  height: 3px;
31  border-radius: 2px;
32  background: #00135C;
33  transition: all .5s ease;
34}
35
36.button::before {
37  top: 0;
38  left: 54px;
39  width: calc(100% - 56px * 2 - 16px);
40}
41
42.button::after {
43  top: 0;
44  right: 54px;
45  width: 8px;
46}
47
48.button__text::before {
49  bottom: 0;
50  right: 54px;
51  width: calc(100% - 56px * 2 - 16px);
52}
53
54.button__text::after {
55  top: 0;
56  right: 54px;
57  width: 8px;
58}
59
60.button__line {
61  position: absolute;
62  top: 0;
63  width: 56px;
64  height: 100%;
65  overflow: hidden;
66}
67
68.button__line::before {
69  content: '';
70  position: absolute;
71  top: 0;
72  width: 150%;
73  height: 100%;
74  box-sizing: border-box;
75  border-radius: 300px;
76  border: #00135C;
77}
78
79.button__line:nth-child(1),
80.button__line:nth-child(1)::before {
81  left: 0;
82}
83
84.button__line:nth-child(2),
85.button__line:nth-child(2)::before {
86  right: 0;
87}
88
89.button:hover {
90  letter-spacing: 6px;
91}
92
93.button:hover::before,
94.button:hover .button__text::before {
95  width: 8px;
96}
97
98.button:hover::after,
99.button:hover .button__text::after {
100  width: calc(100% - 56px * 2 - 16px);
101}
102
103.button__drow1,
104.button__drow2 {
105  position: absolute;
106  z-index: -1;
107  border: 1rem;
108  transform-origin: 1rem 1rem;
109}
110
111.button__drow1 {
112  top: -1rem;
113  left: 40px;
114  width: 2rem;
115  height: 0;
116  transform: rotate(30deg);
117}
118
119.button__drow2 {
120  top: 44px;
121  left: 77px;
122  width: 2rem;
123  height: 0;
124  transform: rotate(-127deg);
125}
126
127.button__drow1::before,
128.button__drow1::after,
129.button__drow2::before,
130.button__drow2::after {
131  content: '';
132  position: absolute;
133}
134
135.button__drow1::before {
136  bottom: 0;
137  left: 0;
138  width: 0;
139  height: 2rem;
140  border-radius: 1rem;
141  transform-origin: 1rem 1rem;
142  transform: rotate(-60deg);
143}
144
145.button__drow1::after {
146  top: -10px;
147  left: 45px;
148  width: 0;
149  height: 2rem;
150  border-radius: 1rem;
151  transform-origin: 1rem 1rem;
152  transform: rotate(-69deg);
153}
154
155.button__drow2::before {
156  bottom: 0;
157  left: 0;
158  width: 0;
159  height: 2rem;
160  border-radius: 1rem;
161  transform-origin: 1rem 1rem;
162  transform: rotate(-146deg);
163}
164
165.button__drow1::after {
166  bottom: 26px;
167  left: -40px;
168  width: 0;
169  height: 2rem;
170  border-radius: 1rem;
171  transform-origin: 1rem 1rem;
172  transform: rotate(-262deg);
173}
174
175.button__drow1,
176.button__drow1::before,
177.button__drow1::after,
178.button__drow2,
179.button__drow2::before,
180.button__drow2::after {
181  background: dodgerblue;
182}
183
184.button:hover .button__drow1 {
185  animation: drow1 ease-in .06s;
186  animation-fill-mode: forwards;
187}
188
189.button:hover .button__drow1::before {
190  animation: drow2 linear .08s .06s;
191  animation-fill-mode: forwards;
192}
193
194.button:hover .button__drow1::after {
195  animation: drow3 linear .03s .14s;
196  animation-fill-mode: forwards;
197}
198
199.button:hover .button__drow2 {
200  animation: drow4 linear .06s .2s;
201  animation-fill-mode: forwards;
202}
203
204.button:hover .button__drow2::before {
205  animation: drow3 linear .03s .26s;
206  animation-fill-mode: forwards;
207}
208
209.button:hover .button__drow2::after {
210  animation: drow5 linear .06s .32s;
211  animation-fill-mode: forwards;
212}
213
214@keyframes drow1 {
215  0% {
216    height: 0;
217  }
218
219  100% {
220    height: 100px;
221  }
222}
223
224@keyframes drow2 {
225  0% {
226    width: 0;
227    opacity: 0;
228  }
229
230  10% {
231    opacity: 0;
232  }
233
234  11% {
235    opacity: 1;
236  }
237
238  100% {
239    height: 120px;
240  }
241}
242
243@keyframes drow3 {
244  0% {
245    height: 0;
246  }
247
248  100% {
249    height: 80px;
250  }
251}
252
253@keyframes drow4 {
254  0% {
255    height: 0;
256  }
257
258  100% {
259    height: 120px;
260  }
261}
262
263@keyframes drow5 {
264  0% {
265    height: 0;
266  }
267
268  100% {
269    height: 124px;
270  }
271}
272
273.container {
274  width: 100%;
275  height: 300px;
276  display: flex;
277  flex-direction: column;
278  justify-content: center;
279  align-items: center;
280}
281
282
283
284