Button by asgardOP

1.button {
2  cursor: pointer;
3  width: 50px;
4  height: 50px;
5  border-radius: 50px;
6  border: none;
7  background: linear-gradient(120deg, #833ab4, #fd1d1d, #fcb045);
8  position: relative;
9  z-index: 0;
10  display: flex;
11  align-items: center;
12  justify-content: center;
13  margin-left: 10px;
14  transition: 0.1s;
15}
16.button svg {
17  color: white;
18  width: 30px;
19  height: 30px;
20  z-index: 9;
21}
22
23.button:nth-child(3) {
24  background: linear-gradient(120deg, #02ff2c, #008a12);
25}
26
27.button:nth-child(4) {
28  background: rgb(69, 187, 255);
29}
30
31.button:nth-child(5) {
32  background: rgb(255, 33, 33);
33}
34
35.button:nth-child(6) {
36  background: black;
37}
38
39.button:active {
40  transform: scale(0.85);
41}
42
43.button::before {
44  content: "";
45  position: absolute;
46  width: 55px;
47  height: 55px;
48  background-color: #212121;
49  border-radius: 50px;
50  z-index: -1;
51  border: 0px solid rgba(255, 255, 255, 0.411);
52  transition: 0.4s;
53}
54
55.button:hover::before {
56  width: 0px;
57  height: 0px;
58}
59