1.btn {
2 position: relative;
3 display: flex;
4 overflow: hidden;
5 cursor: pointer;
6 width: 150px;
7 height: 50px;
8 background-color: #eeeeed;
9 border-radius: 80px;
10 border: none;
11 padding: 0 80px;
12 transition: all .2s ease;
13 justify-content: center;
14 align-items: center;
15}
16
17.btn:hover {
18 transform: scale(1.1);
19}
20
21.btn span {
22 position: absolute;
23 z-index: 99;
24 width: 150px;
25 height: 50px;
26 border-radius: 80px;
27 font-family: 'Courier New', Courier, monospace;
28 font-weight: 600;
29 font-size: 17px;
30 text-align: center;
31 line-height: 50px;
32 letter-spacing: 2px;
33 color: #eeeeed;
34 background-color: #1f1f1f;
35 padding: 0 10px;
36 transition: all 1.2s ease;
37}
38
39.btn .container {
40 display: flex;
41 width: 150px;
42 border-radius: 80px;
43 line-height: 50px;
44}
45
46.btn svg {
47 padding: 0 5px;
48 opacity: 0;
49}
50
51.btn .container svg:nth-of-type(1) {
52 transition-delay: 0.65s;
53}
54
55.btn .container svg:nth-of-type(2) {
56 transition-delay: 0.8s;
57}
58
59.container svg:nth-of-type(3) {
60 transition-delay: 0.5s;
61}
62
63.btn:hover span {
64 opacity: 0;
65}
66
67.btn:hover svg {
68 opacity: 1;
69}