1.btn {
2  position: relative;
3  outline: 0;
4  border: 1px solid transparent;
5  background-color: #488aec;
6  color: #ffffff;
7  font-size: 0.75rem;
8  line-height: 1rem;
9  font-weight: 700;
10  text-transform: uppercase;
11  padding: 0.75rem 1.5rem;
12  border-radius: 0.5rem;
13  cursor: pointer;
14  display: flex;
15  flex-direction: column;
16  align-items: center;
17  justify-content: center;
18  vertical-align: middle;
19  overflow: hidden;
20  box-shadow: 0 4px 6px -1px #488aec31, 0 2px 4px -1px #488aec17;
21}
22
23.btn span {
24  height: 100%;
25  width: 100%;
26  display: flex;
27  align-items: center;
28  justify-content: center;
29  gap: 0.75rem;
30  transition: all .4s ease;
31}
32
33button svg {
34  width: 1.25rem;
35  height: 1.25rem;
36}
37
38.btn span:nth-child(2),.btn span:nth-child(3) {
39  position: absolute;
40  top: 40px;
41  color: #fff;
42}
43
44.btn span:nth-child(2) {
45  background-color: #488aec;
46}
47
48.btn span:nth-child(3) {
49  background-color: #488aec;
50}
51
52.btn:hover {
53  box-shadow: 0 10px 15px -3px #488aec4f, 0 4px 6px -2px #488aec17;
54}
55
56.btn:hover span:nth-child(2), .btn:focus span:nth-child(3) {
57  top: 0;
58}
59
60.btn:focus {
61  box-shadow: none;
62}