1button {
2 outline: none;
3 cursor: pointer;
4 border: none;
5 padding: 0.9rem 2rem;
6 margin: 0;
7 font-family: inherit;
8 font-size: inherit;
9 position: relative;
10 display: inline-block;
11 letter-spacing: 0.05rem;
12 font-weight: 700;
13 font-size: 17px;
14 border-radius: 500px;
15 overflow: hidden;
16 background: #66ff66;
17 color: ghostwhite;
18}
19
20button span {
21 position: relative;
22 z-index: 10;
23 transition: color 0.4s;
24}
25
26button:hover span {
27 color: black;
28}
29
30button::before,
31button::after {
32 position: absolute;
33 top: 0;
34 left: 0;
35 width: 100%;
36 height: 100%;
37 z-index: 0;
38}
39
40button::before {
41 content: "";
42 background: #000;
43 width: 120%;
44 left: -10%;
45 transform: skew(30deg);
46 transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
47}
48
49button:hover::before {
50 transform: translate3d(100%, 0, 0);
51}
52