1button {
2 padding: 0.8em 1.8em;
3 border: 2px solid #17C3B2;
4 position: relative;
5 overflow: hidden;
6 background-color: transparent;
7 text-align: center;
8 text-transform: uppercase;
9 font-size: 16px;
10 transition: .3s;
11 z-index: 1;
12 font-family: inherit;
13 color: #17C3B2;
14}
15
16button::before {
17 content: '';
18 width: 0;
19 height: 300%;
20 position: absolute;
21 top: 50%;
22 left: 50%;
23 transform: translate(-50%, -50%) rotate(45deg);
24 background: #17C3B2;
25 transition: .5s ease;
26 display: block;
27 z-index: -1;
28}
29
30button:hover::before {
31 width: 105%;
32}
33
34button:hover {
35 color: #111;
36}
37