1button {
2  background-color: transparent;
3  color: white;
4  font-weight: bold;
5  height: 3.3em;
6  width: 12em;
7  border: none;
8  border-radius: 25px;
9  cursor: pointer;
10  transition: .4s ease;
11  z-index: -2;
12  position: relative;
13  overflow: hidden;
14  text-transform: uppercase;
15  display: flex;
16  justify-content: center;
17  align-items: center;
18}
19
20button .gradient {
21  height: 100%;
22  width: 350%;
23  background: linear-gradient(to right, #156aa3 25%, #64EAE7 65%, #16a085 90%);
24  position: absolute;
25  top: 0;
26  left: 60%;
27  transform: translateX(-50%);
28  z-index: -1;
29  transition: .4s ease;
30}
31
32button .txt {
33  transition: .4s ease .5s;
34}
35
36button .txt2 {
37  position: absolute;
38  opacity: 0;
39  transition: .4s;
40}
41
42button:hover .gradient {
43  transition: .4s ease;
44  transform: translateX(-40%);
45}
46
47button:focus .gradient {
48  background-size: 200%;
49  background-position: right;
50  transform: translateX(-88%);
51  transition: 1s ease;
52}
53
54button:focus .txt {
55  opacity: 0;
56  transition: .4s ease;
57}
58
59button:focus .txt2 {
60  opacity: 1;
61  transition: 1s ease .5s;
62}