1.btn {
2 width: 6.5em;
3 height: 2.3em;
4 margin: 0.5em;
5 background: black;
6 color: white;
7 border: none;
8 border-radius: 0.625em;
9 font-size: 20px;
10 font-weight: bold;
11 cursor: pointer;
12 position: relative;
13 z-index: 1;
14 overflow: hidden;
15}
16
17button:hover {
18 color: black;
19}
20
21button:after {
22 content: "";
23 background: white;
24 position: absolute;
25 z-index: -1;
26 left: -20%;
27 right: -20%;
28 top: 0;
29 bottom: 0;
30 transform: skewX(-45deg) scale(0, 1);
31 transition: all 0.5s;
32}
33
34button:hover:after {
35 transform: skewX(-45deg) scale(1, 1);
36 -webkit-transition: all 0.5s;
37 transition: all 0.5s;
38}