Button by elijahgummer

1ul {
2  position: relative;
3  display: flex;
4  gap: 25px;
5}
6
7ul li {
8  position: relative;
9  list-style: none;
10  width: 60px;
11  height: 60px;
12  background: #fff;
13  border-radius: 60px;
14  cursor: pointer;
15  display: flex;
16  justify-content: center;
17  align-items: center;
18  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
19  transition: 0.5s;
20}
21
22ul li:hover {
23  width: 180px;
24  box-shadow: 0 10px 25px rgba(0, 0, 0, 0);
25}
26
27ul li::before {
28  content: "";
29  position: absolute;
30  inset: 0;
31  border-radius: 60px;
32  background: linear-gradient(45deg, var(--i), var(--j));
33  opacity: 0;
34  transition: 0.5s;
35}
36
37ul li:hover::before {
38  opacity: 1;
39}
40
41ul li::after {
42  content: "";
43  position: absolute;
44  top: 10px;
45  width: 100%;
46  height: 100%;
47  border-radius: 60px;
48  background: linear-gradient(45deg, var(--i), var(--j));
49  transition: 0.5s;
50  filter: blur(15px);
51  z-index: -1;
52  opacity: 0;
53}
54
55ul li:hover::after {
56  opacity: 0.5;
57}
58
59ul li .icon {
60  color: #777;
61  font-size: 1.75em;
62  transition: 0.5s;
63  transition-delay: 0.25s;
64}
65
66ul li:hover .icon {
67  transform: scale(0);
68  color: #fff;
69  transition-delay: 0s;
70}
71
72ul li span {
73  position: absolute;
74}
75
76ul li .title {
77  color: #fff;
78  font-size: 1.1em;
79  text-transform: uppercase;
80  letter-spacing: 0.1em;
81  transform: scale(0);
82  transition: 0.5s;
83  transition-delay: 0s;
84}
85
86ul li:hover .title {
87  transform: scale(1);
88  transition-delay: 0.25s;
89}
90