1button {
2  width: 140px;
3  height: 56px;
4  overflow: hidden;
5  border: none;
6  color: #fff;
7  background: none;
8  position: relative;
9  padding-bottom: 2em;
10}
11
12button > div,button > svg {
13  position: absolute;
14  width: 100%;
15  height: 100%;
16  display: flex;
17}
18
19button:before {
20  content: "";
21  position: absolute;
22  height: 2px;
23  bottom: 0;
24  left: 0;
25  width: 100%;
26  transform: scaleX(0);
27  transform-origin: bottom right;
28  background: currentColor;
29  transition: transform 0.25s ease-out;
30}
31
32button:hover:before {
33  transform: scaleX(1);
34  transform-origin: bottom left;
35}
36
37button .clone > *,button .text > * {
38  opacity: 1;
39  font-size: 1.3rem;
40  transition: 0.2s;
41  margin-left: 4px;
42}
43
44button .clone > * {
45  transform: translateY(60px);
46}
47
48button:hover .clone > * {
49  opacity: 1;
50  transform: translateY(0px);
51  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
52}
53
54button:hover .text > * {
55  opacity: 1;
56  transform: translateY(-60px);
57  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
58}
59
60button:hover .clone > :nth-child(1) {
61  transition-delay: 0.15s;
62}
63
64button:hover .clone > :nth-child(2) {
65  transition-delay: 0.2s;
66}
67
68button:hover .clone > :nth-child(3) {
69  transition-delay: 0.25s;
70}
71
72button:hover .clone > :nth-child(4) {
73  transition-delay: 0.3s;
74}
75/* icon style and hover */
76button svg {
77  width: 20px;
78  right: 0;
79  top: 50%;
80  transform: translateY(-50%) rotate(-50deg);
81  transition: 0.2s ease-out;
82}
83
84button:hover svg {
85  transform: translateY(-50%) rotate(-90deg);
86}