Button by misaraadel

1.btn-shape {
2  transition: all .3s linear;
3  width: 168px;
4  height: 50px;
5  display: flex;
6  align-items: center;
7  align-content: center;
8  justify-content: center;
9  outline: none;
10  background-color: #020202;
11  border-radius: 50px;
12  border: 0px;
13  position: relative;
14  z-index: 99;
15  cursor: pointer;
16}
17
18.btn-shape::after,
19.btn-shape::before {
20  content: '';
21  position: absolute;
22  background-color: #020202;
23  width: 100%;
24  opacity: 0;
25  height: 100%;
26  left: 0;
27  border-radius: 100px;
28  bottom: 0;
29  z-index: -2;
30  transition: all .3s linear;
31}
32
33.btn-shape span {
34  font-size: 16px;
35  font-weight: 700;
36  transition: all .3s linear;
37  color: #fff;
38  text-transform: capitalize;
39}
40
41.btn-shape:hover {
42  transform: translate(-12px, -12px);
43}
44
45.btn-shape:hover:after {
46  transform: translate(6px, 6px);
47  opacity: .5;
48}
49
50.btn-shape:hover::before {
51  transform: translate(12px, 12px);
52  opacity: .3;
53}
54
55.btn-shape:hover span {
56  animation: storm .4s linear both;
57}
58
59@keyframes storm {
60  0% {
61    transform: translate3d(0, 0, 0) translateZ(0);
62  }
63
64  25% {
65    transform: translate3d(4px, 0, 0) translateZ(0);
66  }
67
68  50% {
69    transform: translate3d(-3px, 0, 0) translateZ(0);
70  }
71
72  75% {
73    transform: translate3d(2px, 0, 0) translateZ(0);
74  }
75
76  100% {
77    transform: translate3d(0, 0, 0) translateZ(0);
78  }
79}