1button {
2  background-color: transparent;
3  border: 1px solid #00b4d8;
4  border-radius: 0.2rem;
5  color: #00b4d8;
6  font-weight: bold;
7  padding: 0.8rem 1.5rem;
8  position: relative;
9  text-transform: uppercase;
10  transition: ease-in 0.3s;
11}
12
13button:hover, button:active, button:focus {
14  background: radial-gradient(#00b4d8, #4cc9f0);
15  ;
16  box-shadow: 0px 0px 0.3rem #00b4d8;
17  color: #001219;
18}
19
20button::before {
21  bottom: -0.5rem;
22  content: '';
23  left: 0;
24  position: absolute;
25}
26
27button::after {
28  top: -0.5rem;
29  content: '';
30  left: 0;
31  position: absolute;
32}
33
34button:hover::before {
35  animation: ease-in moveBar 0.6s forwards reverse;
36}
37
38button:hover::after {
39  animation: ease-in moveBar 0.6s forwards;
40}
41
42@keyframes moveBar {
43  0% {
44    width: 0;
45  }
46
47  1% {
48    border: 1px solid #00b4d8;
49  }
50
51  40% {
52    width: 2rem;
53  }
54
55  99% {
56    border: 1px solid #00b4d8;
57    left: 99%;
58  }
59
60  100% {
61    border: none;
62    left: 100%;
63    width: 0;
64  }
65}