1button {
2  background-color: transparent;
3  width: 13em;
4  height: 3.3em;
5  border: 2px solid #1abc9c;
6  border-radius: 25px;
7  font-weight: bold;
8  text-transform: uppercase;
9  color: #1abc9c;
10  padding: 2px;
11  position: relative;
12  display: flex;
13  justify-content: center;
14  align-items: center;
15  z-index: -2;
16  overflow: hidden;
17}
18
19button .txt {
20  color: #1abc9c;
21  transition: .4s ease-in-out;
22  position: absolute;
23}
24
25button .txt2 {
26  transform: translateY(1em) scale(0);
27  color: #212121;
28  position: absolute;
29}
30
31button .loader-container {
32  height: 100%;
33  width: 100%;
34  background-color: transparent;
35  border-radius: inherit;
36  display: flex;
37  justify-content: center;
38  align-items: center;
39  z-index: -1;
40  overflow: hidden;
41}
42
43button .loader {
44  height: 100%;
45  width: 100%;
46  background-color: #1abc9c;
47  border-radius: inherit;
48  transform: translateX(-13em);
49}
50
51button:focus {
52  transition: .4s ease-in-out .4s;
53  animation: scaling 1.5s ease-in-out 0s 1 both;
54}
55
56button:focus .txt {
57  position: absolute;
58  transform: translateY(-5em);
59  transition: .4s ease-in-out;
60}
61
62button:focus .txt2 {
63  transform: translateY(0) scale(1);
64  transition: .3s ease-in-out 1.7s;
65}
66
67button:focus .loader {
68  display: block;
69  transform: translate(0);
70  transition: .8s cubic-bezier(0,.4,1,.28) .4s;
71  animation: loading;
72}
73
74@keyframes scaling {
75  20% {
76    height: 1.5em;
77  }
78
79  80% {
80    height: 1.5em;
81  }
82
83  100% {
84    height: 3.3em;
85  }
86}