1.btn {
2 padding: 1.1em 2em;
3 background: none;
4 border: 2px solid #fff;
5 font-size: 15px;
6 color: #131313;
7 cursor: pointer;
8 position: relative;
9 overflow: hidden;
10 transition: all 0.3s;
11 border-radius: 12px;
12 background-color: #ecd448;
13 font-weight: bolder;
14 box-shadow: 0 2px 0 2px #000;
15}
16
17.btn:before {
18 content: "";
19 position: absolute;
20 width: 100px;
21 height: 120%;
22 background-color: #ff6700;
23 top: 50%;
24 transform: skewX(30deg) translate(-150%, -50%);
25 transition: all 0.5s;
26}
27
28.btn:hover {
29 background-color: #4cc9f0;
30 color: #fff;
31 box-shadow: 0 2px 0 2px #0d3b66;
32}
33
34.btn:hover::before {
35 transform: skewX(30deg) translate(150%, -50%);
36 transition-delay: 0.1s;
37}
38
39.btn:active {
40 transform: scale(0.9);
41}