1button {
2  position: relative;
3  margin: 0;
4  padding: 0.8em 1em;
5  outline: none;
6  text-decoration: none;
7  display: flex;
8  justify-content: center;
9  align-items: center;
10  cursor: pointer;
11  border: none;
12  text-transform: uppercase;
13  background-color: #333;
14  border-radius: 10px;
15  color: #fff;
16  font-weight: 300;
17  font-size: 18px;
18  font-family: inherit;
19  z-index: 0;
20  overflow: hidden;
21  transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
22}
23
24button:hover {
25  animation: sh0 0.5s ease-in-out both;
26}
27
28@keyframes sh0 {
29  0% {
30    transform: rotate(0deg) translate3d(0, 0, 0);
31  }
32
33  25% {
34    transform: rotate(7deg) translate3d(0, 0, 0);
35  }
36
37  50% {
38    transform: rotate(-7deg) translate3d(0, 0, 0);
39  }
40
41  75% {
42    transform: rotate(1deg) translate3d(0, 0, 0);
43  }
44
45  100% {
46    transform: rotate(0deg) translate3d(0, 0, 0);
47  }
48}
49
50button:hover span {
51  animation: storm 0.7s ease-in-out both;
52  animation-delay: 0.06s;
53}
54
55button::before,
56button::after {
57  content: '';
58  position: absolute;
59  right: 0;
60  bottom: 0;
61  width: 100px;
62  height: 100px;
63  border-radius: 50%;
64  background: #fff;
65  opacity: 0;
66  transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
67  z-index: -1;
68  transform: translate(100%, -25%) translate3d(0, 0, 0);
69}
70
71button:hover::before,
72button:hover::after {
73  opacity: 0.15;
74  transition: transform 0.2s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
75}
76
77button:hover::before {
78  transform: translate3d(50%, 0, 0) scale(0.9);
79}
80
81button:hover::after {
82  transform: translate(50%, 0) scale(1.1);
83}
84
85