Button by Leo74641727

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