1.btn {
2  --btn-color: rgb(255, 0, 0);
3  position: relative;
4  padding: 16px 32px;
5  font-family: Roboto, sans-serif;
6  font-weight: 500;
7  font-size: 16px;
8  line-height: 1;
9  color: white;
10  background: none;
11  border: none;
12  outline: none;
13  overflow: hidden;
14  cursor: pointer;
15  filter: drop-shadow(0 2px 8px rgba(39, 94, 254, 0.32));
16  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
17}
18
19.btn::before {
20  position: absolute;
21  content: "";
22  top: 0;
23  left: 0;
24  z-index: -1;
25  width: 100%;
26  height: 100%;
27  background: var(--btn-color);
28  border-radius: 24px;
29  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
30}
31
32.btn span,
33        .btn span span {
34  display: inline-flex;
35  vertical-align: middle;
36  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
37}
38
39.btn span {
40  transition-delay: 0.05s;
41}
42
43.btn span:first-child {
44  padding-right: 7px;
45}
46
47.btn span span {
48  margin-left: 8px;
49  transition-delay: 0.1s;
50}
51
52.btn ul {
53  position: absolute;
54  top: 50%;
55  left: 0;
56  right: 0;
57  display: flex;
58  margin: 0;
59  padding: 0;
60  list-style-type: none;
61  transform: translateY(-50%);
62}
63
64.btn ul li {
65  flex: 1;
66}
67
68.btn ul li a {
69  display: inline-flex;
70  vertical-align: middle;
71  transform: translateY(55px);
72  transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
73}
74
75.btn ul li a:hover {
76  opacity: 0.5;
77}
78
79.btn:hover::before {
80  transform: scale(1.2);
81}
82
83.btn:hover span,
84        .btn:hover span span {
85  transform: translateY(-55px);
86}
87
88.btn:hover ul li a {
89  transform: translateY(0);
90}
91
92.btn:hover ul li:nth-child(1) a {
93  transition-delay: 0.15s;
94}
95
96.btn:hover ul li:nth-child(2) a {
97  transition-delay: 0.2s;
98}
99
100.btn:hover ul li:nth-child(3) a {
101  transition-delay: 0.25s;
102}