Button by catraco

1.btn {
2  --color: #4dd4ac;
3  position: relative;
4  display: flex;
5  justify-content: center;
6  align-items: center;
7  transition: all .5s;
8  border: none;
9  background-color: transparent;
10}
11
12.btn div {
13  letter-spacing: 2px;
14  font-weight: bold;
15  background: var(--color);
16  border-radius: 2rem;
17  color: black;
18  padding: 1rem;
19}
20
21.btn::before {
22  content: '';
23  z-index: -1;
24  background-color: var(--color);
25  border: 2px solid black;
26  border-radius: 2rem;
27  width: 110%;
28  height: 100%;
29  position: absolute;
30  transform: rotate(10deg);
31  transition: .5s;
32  opacity: 0.2;
33}
34
35.btn:hover {
36  cursor: pointer;
37  filter: brightness(1.2);
38  transform: scale(1.1);
39}
40
41.btn:hover::before {
42  transform: rotate(0deg);
43  opacity: 1;
44}
45
46.btn svg {
47  transform: translateX(-200%);
48  transition: .5s;
49  width: 0;
50  opacity: 0;
51}
52
53.btn:hover svg {
54  width: 25px;
55  transform: translateX(0%);
56  opacity: 1;
57}
58
59.btn:active {
60  filter: brightness(1.4);
61}