Button by mRcOol7

1.button {
2  width: 50px;
3  height: 50px;
4  border-radius: 50%;
5  background: linear-gradient(
6    to bottom right,
7    rgb(69, 120, 255),
8    rgb(255, 69, 69)
9  );
10  border: none;
11  font-weight: 600;
12  display: flex;
13  align-items: center;
14  justify-content: center;
15  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.164);
16  cursor: pointer;
17  transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
18  overflow: hidden;
19  position: relative;
20}
21
22.svgIcon {
23  width: 12px;
24  transition: transform 0.3s ease-in-out;
25}
26
27.svgIcon path {
28  fill: white;
29}
30
31.button:hover {
32  width: 140px;
33  border-radius: 50px;
34  transform: scale(1.1);
35  color: rgba(255, 255, 255, 0.9);
36  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
37}
38
39.button:hover .svgIcon {
40  width: 50px;
41  transform: translateY(60%);
42}
43
44.button::before {
45  position: absolute;
46  top: -20px;
47  content: "Delete";
48  color: white;
49  transition: font-size 0.3s ease-in-out, opacity 0.3s ease-in-out,
50    transform 0.3s ease-in-out, color 0.3s ease-in-out;
51  font-size: 2px;
52}
53
54.button:hover::before {
55  font-size: 13px;
56  opacity: 1;
57  transform: translateY(30px);
58  color: rgba(255, 255, 255, 0.9);
59}
60