1button {
2 padding: 0.9em 1.8em;
3 text-transform: uppercase;
4 text-decoration: none;
5 letter-spacing: 4px;
6 color: transparent;
7 border: 3px solid #ff0;
8 font-size: 14px;
9 position: relative;
10 font-family: inherit;
11 background: transparent;
12}
13
14button::before {
15 content: "button";
16 position: absolute;
17 top: 0;
18 left: 0;
19 width: 100%;
20 height: 100%;
21 background-color: #363636;
22 color: #ff0;
23 display: flex;
24 justify-content: center;
25 align-items: center;
26 transition: all 0.5s;
27}
28
29button:hover::before {
30 left: 100%;
31 transform: scale(0) rotateY(360deg);
32 opacity: 0;
33}
34
35button::after {
36 content: "button";
37 position: absolute;
38 top: 0;
39 left: -100%;
40 width: 100%;
41 height: 100%;
42 background-color: #363636;
43 color: #ff0;
44 display: flex;
45 justify-content: center;
46 align-items: center;
47 transition: all 0.5s;
48 transform: scale(0) rotateY(0deg);
49 opacity: 0;
50}
51
52button:hover::after {
53 left: 0;
54 transform: scale(1) rotateY(360deg);
55 opacity: 1;
56}
57