Button by jamik-dev

1.Download-button {
2  display: flex;
3  align-items: center;
4  font-family: inherit;
5  font-weight: 500;
6  font-size: 17px;
7  padding: 12px 20px;
8  color: white;
9  background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
10  border: none;
11  box-shadow: 0 0.7em 1.5em -0.5em rgba(59, 48, 78, 0.527);
12  letter-spacing: 0.05em;
13  border-radius: 8px;
14  cursor: pointer;
15  position: relative;
16  transition: all 0.2s;
17}
18
19.Download-button svg {
20  margin-right: 8px;
21  width: 25px;
22}
23
24.Download-button:hover {
25  box-shadow: 0 0.5em 1.5em -0.5em #3b82f6;
26  border-top-left-radius: 40px;
27  border-bottom-right-radius: 40px;
28}
29
30.Download-button:active {
31  box-shadow: 0 0.3em 1em -0.5em #3b82f6;
32}
33
34.Download-button::before {
35  content: "";
36  width: 4px;
37  height: 40%;
38  background-color: white;
39  position: absolute;
40  border-top-right-radius: 5px;
41  border-bottom-right-radius: 5px;
42  left: 0;
43  transition: all 0.2s;
44}
45
46.Download-button::after {
47  content: "";
48  width: 4px;
49  height: 40%;
50  background-color: white;
51  position: absolute;
52  border-top-left-radius: 5px;
53  border-bottom-left-radius: 5px;
54  right: 0;
55  transition: all 0.2s;
56}
57
58.Download-button:hover::before,
59.Download-button:hover::after {
60  height: 60%;
61}
62
63.Download-button:hover::before {
64  border-top-left-radius: 5px;
65  border-bottom-left-radius: 5px;
66  border-top-right-radius: 0px;
67  border-bottom-right-radius: 0px;
68  transform: translate(5px, -15px) rotate(45deg);
69}
70
71.Download-button:hover::after {
72  border-top-right-radius: 5px;
73  border-bottom-right-radius: 5px;
74  border-top-left-radius: 0px;
75  border-bottom-left-radius: 0px;
76  transform: translate(-5px, 15px) rotate(45deg);
77}
78