1.btn {
2  width: 140px;
3  height: 40px;
4  display: flex;
5  align-items: center;
6  justify-content: space-evenly;
7  text-transform: uppercase;
8  letter-spacing: 1px;
9  border: none;
10  position: relative;
11  background-color: transparent;
12  transition: .2s cubic-bezier(0.19, 1, 0.22, 1);
13  opacity: 0.6;
14}
15
16.btn::after {
17  content: '';
18  border-bottom: 3px double rgb(214, 207, 113);
19  width: 0;
20  height: 100%;
21  position: absolute;
22  margin-top: -5px;
23  top: 0;
24  left: 5px;
25  visibility: hidden;
26  opacity: 1;
27  transition: .2s linear;
28}
29
30.btn .icon {
31  transform: translateX(0%);
32  transition: .2s linear;
33  animation: attention 1.2s linear infinite;
34}
35
36.btn:hover::after {
37  visibility: visible;
38  opacity: 0.7;
39  width: 90%;
40}
41
42.btn:hover {
43  letter-spacing: 2px;
44  opacity: 1;
45}
46
47.btn:hover > .icon {
48  transform: translateX(30%);
49  animation: none;
50}
51
52@keyframes attention {
53  0% {
54    transform: translateX(0%);
55  }
56
57  50% {
58    transform: translateX(30%);
59  }
60}
61