1.btn {
2 --color: #00A97F;
3 --color2: rgb(10, 25, 30);
4 padding: 0.8em 1.75em;
5 background-color: transparent;
6 border-radius: 6px;
7 border: .3px solid var(--color);
8 transition: .5s;
9 position: relative;
10 overflow: hidden;
11 cursor: pointer;
12 z-index: 1;
13 font-weight: 300;
14 font-size: 17px;
15 font-family: 'Roboto', 'Segoe UI', sans-serif;
16 text-transform: uppercase;
17 color: var(--color);
18}
19
20.btn::after, .btn::before {
21 content: '';
22 display: block;
23 height: 100%;
24 width: 100%;
25 transform: skew(90deg) translate(-50%, -50%);
26 position: absolute;
27 inset: 50%;
28 left: 25%;
29 z-index: -1;
30 transition: .5s ease-out;
31 background-color: var(--color);
32}
33
34.btn::before {
35 top: -50%;
36 left: -25%;
37 transform: skew(90deg) rotate(180deg) translate(-50%, -50%);
38}
39
40.btn:hover::before {
41 transform: skew(45deg) rotate(180deg) translate(-50%, -50%);
42}
43
44.btn:hover::after {
45 transform: skew(45deg) translate(-50%, -50%);
46}
47
48.btn:hover {
49 color: var(--color2);
50}
51
52.btn:active {
53 filter: brightness(.7);
54 transform: scale(.98);
55}