1.button {
2  --width: 100px;
3  --height: 25px;
4  --button-color: #0059ff;
5  width: var(--width);
6  height: var(--height);
7  background: var(--button-color);
8  position: relative;
9  text-align: center;
10  border-radius: 30px;
11  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
12  text-decoration: solid;
13  transition: background box-shadow 0.3s;
14  -webkit-box-shadow: 4px 8px 19px -3px #0059ff;
15  box-shadow: 0px 0px 20px -3px #0059ff;
16  text-shadow: 0 0 .4em rgb(255, 255, 255);
17}
18
19.button::before {
20  position: absolute;
21  content: attr(data-tooltip);
22  background-color: var(--button-color);
23  font-size: 0.9rem;
24  color: #111;
25}
26
27.button::after {
28  position: absolute;
29  content: '';
30  width: 0;
31  height: 0;
32  border: 10px solid transparent;
33  border-top-color: var(--button-color);
34}
35
36.button::after,.button::before {
37  opacity: 0;
38  visibility: hidden;
39  transition: all 0.5s;
40}
41
42.text {
43  display: flex;
44  align-items: center;
45  justify-content: center;
46}
47
48.button-wrapper,.text,.icon {
49  overflow: hidden;
50  position: absolute;
51  width: 100%;
52  height: 100%;
53  left: 0;
54  color: #fff;
55}
56
57.text {
58  top: 0
59}
60
61.text,.icon {
62  transition: top 0.45s;
63}
64
65.icon {
66  color: #fff;
67  top: 100%;
68  display: flex;
69  align-items: center;
70  justify-content: center;
71}
72
73.button:hover {
74  background: #4586ff;
75  box-shadow: 0px 0px 20px -3px #4586ff;
76}
77
78.button:hover .text {
79  top: -100%;
80}
81
82.button:hover .icon {
83  top: 0;
84}
85
86
87
88