1button {
2 position: relative;
3 overflow: hidden;
4 border: 1px solid #18181a;
5 color: #18181a;
6 display: inline-block;
7 font-size: 15px;
8 line-height: 15px;
9 padding: 18px 18px 17px;
10 text-decoration: none;
11 cursor: pointer;
12 background: #fff;
13 user-select: none;
14 -webkit-user-select: none;
15 touch-action: manipulation;
16}
17
18button span:first-child {
19 position: relative;
20 transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
21 z-index: 10;
22}
23
24button span:last-child {
25 color: white;
26 display: block;
27 position: absolute;
28 bottom: 0;
29 transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
30 z-index: 100;
31 opacity: 0;
32 top: 50%;
33 left: 50%;
34 transform: translateY(225%) translateX(-50%);
35 height: 14px;
36 line-height: 13px;
37}
38
39button:after {
40 content: "";
41 position: absolute;
42 bottom: -50%;
43 left: 0;
44 width: 100%;
45 height: 100%;
46 background-color: black;
47 transform-origin: bottom center;
48 transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
49 transform: skewY(9.3deg) scaleY(0);
50 z-index: 50;
51}
52
53button:hover:after {
54 transform-origin: bottom center;
55 transform: skewY(9.3deg) scaleY(2);
56}
57
58button:hover span:last-child {
59 transform: translateX(-50%) translateY(-50%);
60 opacity: 1;
61 transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
62}