Button by SteveBloX

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: 50px;
9  transition: all .3s;
10  border: none;
11  font-family: Arial, sans-serif;
12  font-weight: 600;
13  color: white;
14  background-color: #3498db;
15  cursor: pointer;
16}
17
18.btn:hover {
19  transform: scale(1.05);
20  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
21}
22
23.btn:active {
24  transform: scale(0.95);
25  box-shadow: none;
26}
27
28.btn::after {
29  content: "";
30  display: inline-block;
31  height: 100%;
32  width: 100%;
33  border-radius: 50px;
34  position: absolute;
35  top: 0;
36  left: 0;
37  z-index: -1;
38  transition: all .4s;
39}
40
41.btn::after {
42  background-color: #2980b9;
43}
44
45.btn:hover::after {
46  transform: scaleX(1.2) scaleY(1.4);
47  opacity: 0;
48}