1.button {
2 display: inline-block;
3 padding: 12px 24px;
4 border: 1px solid #4f4f4f;
5 border-radius: 4px;
6 transition: all 0.2s ease-in;
7 position: relative;
8 overflow: hidden;
9 font-size: 19px;
10 color: black;
11 z-index: 1;
12}
13
14.button:before {
15 content: "";
16 position: absolute;
17 left: 50%;
18 transform: translateX(-50%) scaleY(1) scaleX(1.25);
19 top: 100%;
20 width: 140%;
21 height: 180%;
22 background-color: rgba(0, 0, 0, 0.05);
23 border-radius: 50%;
24 display: block;
25 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
26 z-index: -1;
27}
28
29.button:after {
30 content: "";
31 position: absolute;
32 left: 55%;
33 transform: translateX(-50%) scaleY(1) scaleX(1.45);
34 top: 180%;
35 width: 160%;
36 height: 190%;
37 background-color: #39bda7;
38 border-radius: 50%;
39 display: block;
40 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
41 z-index: -1;
42}
43
44.button:hover {
45 color: #ffffff;
46 border: 1px solid #39bda7;
47}
48
49.button:hover:before {
50 top: -35%;
51 background-color: #39bda7;
52 transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
53}
54
55.button:hover:after {
56 top: -45%;
57 background-color: #39bda7;
58 transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
59}