1.btn {
2 position: relative;
3 font-size: 17px;
4 text-transform: uppercase;
5 text-decoration: none;
6 padding: 1em 2.5em;
7 display: inline-block;
8 border-radius: 6em;
9 transition: all .2s;
10 border: none;
11 font-family: inherit;
12 font-weight: 500;
13 color: black;
14 background-color: white;
15}
16
17.btn:hover {
18 transform: translateY(-3px);
19 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
20}
21
22.btn:active {
23 transform: translateY(-1px);
24 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
25}
26
27.btn::after {
28 content: "";
29 display: inline-block;
30 height: 100%;
31 width: 100%;
32 border-radius: 100px;
33 position: absolute;
34 top: 0;
35 left: 0;
36 z-index: -1;
37 transition: all .4s;
38}
39
40.btn::after {
41 background-color: #fff;
42}
43
44.btn:hover::after {
45 transform: scaleX(1.4) scaleY(1.6);
46 opacity: 0;
47}