1/*bg*/
2/*txt*/
3/*success*/
4.buttons {
5  display: flex;
6  justify-content: space-around;
7  top: 20px;
8  left: 20px;
9}
10
11.buttons button {
12  width: 150px;
13  height: 50px;
14  background-color: white;
15  margin: 20px;
16  color: #568fa6;
17  position: relative;
18  overflow: hidden;
19  font-size: 14px;
20  letter-spacing: 1px;
21  font-weight: 500;
22  text-transform: uppercase;
23  transition: all 0.3s ease;
24  cursor: pointer;
25  border: 0;
26  display: flex;
27  align-items: center;
28  justify-content: center;
29  border-radius: 3px;
30}
31
32.buttons button:before, .buttons button:after {
33  content: "";
34  position: absolute;
35  width: 0;
36  height: 2px;
37  background-color: #44d8a4;
38  transition: all 0.3s cubic-bezier(0.35, 0.1, 0.25, 1);
39}
40
41.buttons button:before {
42  right: 0;
43  top: 0;
44  transition: all 0.5s cubic-bezier(0.35, 0.1, 0.25, 1);
45}
46
47.buttons button:after {
48  left: 0;
49  bottom: 0;
50}
51
52.buttons button span {
53  width: 100%;
54  height: 100%;
55  position: absolute;
56  left: 0;
57  top: 0;
58  margin: 0;
59  padding: 0;
60  z-index: 1;
61}
62
63.buttons button span:before, .buttons button span:after {
64  content: "";
65  position: absolute;
66  width: 2px;
67  height: 0;
68  background-color: #44d8a4;
69  transition: all 0.3s cubic-bezier(0.35, 0.1, 0.25, 1);
70}
71
72.buttons button span:before {
73  right: 0;
74  top: 0;
75  transition: all 0.5s cubic-bezier(0.35, 0.1, 0.25, 1);
76}
77
78.buttons button span:after {
79  left: 0;
80  bottom: 0;
81}
82
83.buttons button p {
84  padding: 0;
85  margin: 0;
86  transition: all 0.4s cubic-bezier(0.35, 0.1, 0.25, 1);
87  position: absolute;
88  width: 100%;
89  height: 100%;
90}
91
92.buttons button p:before, .buttons button p:after {
93  position: absolute;
94  width: 100%;
95  transition: all 0.4s cubic-bezier(0.35, 0.1, 0.25, 1);
96  z-index: 1;
97  left: 0;
98}
99
100.buttons button p:before {
101  content: attr(data-title);
102  top: 50%;
103  transform: translateY(-50%);
104}
105
106.buttons button p:after {
107  content: attr(data-text);
108  top: 150%;
109  color: #44d8a4;
110}
111
112.buttons button:hover:before, .buttons button:hover:after {
113  width: 100%;
114}
115
116.buttons button:hover span {
117  z-index: 1;
118}
119
120.buttons button:hover span:before, .buttons button:hover span:after {
121  height: 100%;
122}
123
124.buttons button:hover p:before {
125  top: -50%;
126  transform: rotate(5deg);
127}
128
129.buttons button:hover p:after {
130  top: 50%;
131  transform: translateY(-50%);
132}
133
134.buttons button.start {
135  background-color: #44d8a4;
136  box-shadow: 0px 5px 10px -10px rgba(0, 0, 0, 0.2);
137  transition: all 0.2s ease;
138}
139
140.buttons button.start p:before {
141  top: -50%;
142  transform: rotate(5deg);
143}
144
145.buttons button.start p:after {
146  color: white;
147  transition: all 0s ease;
148  content: attr(data-start);
149  top: 50%;
150  transform: translateY(-50%);
151  animation: start 0.3s ease;
152  animation-fill-mode: forwards;
153}
154
155@keyframes start {
156  from {
157    top: -50%;
158  }
159}
160
161.buttons button.start:hover:before, .buttons button.start:hover:after {
162  display: none;
163}
164
165.buttons button.start:hover span {
166  display: none;
167}
168
169.buttons button:active {
170  outline: none;
171  border: none;
172}
173
174.buttons button:focus {
175  outline: 0;
176}