1button {
2  position: relative;
3  padding: 13px 35px;
4  background: transparent;
5  font-size: 17px;
6  font-weight: 900;
7  border: none;
8  transition: all .3s ease-in-out;
9}
10
11button::after {
12  content: "Read More";
13  position: absolute;
14  top: 50%;
15  left: 50%;
16  transform: translate(-50%, -50%);
17  width: 155px;
18  height: 47px;
19  background-color: #ffffff;
20  font-size: 17px;
21  font-weight: 900;
22  line-height: 47px;
23  color: #181818;
24  border: 2px solid #181818;
25  border-radius: 50px;
26  transition: all .3s ease-in-out;
27  z-index: 2;
28}
29
30button:hover::after {
31  width: 165px;
32  height: 50px;
33  font-size: 18px;
34  line-height: 50px;
35}
36
37button:focus::after {
38  content: "Read less";
39  top: 200%;
40  width: 155px;
41  height: 47px;
42  font-size: 17px;
43  line-height: 47px;
44  z-index: -2;
45  pointer-events: none;
46}
47
48.icon {
49  position: absolute;
50  top: 0;
51  left: 50%;
52  transform: translate(-50%, 0);
53  width: 20px;
54  height: auto;
55  z-index: -3;
56  transition: all .3s ease-in-out;
57}
58
59button:focus .icon {
60  top: -250%;
61  width: 75px;
62  height: auto;
63}
64
65.fil0 {
66  fill: #333333
67}
68
69.fil2 {
70  fill: #222222
71}
72
73.fil1 {
74  fill: #181818
75}
76
77.fil3 {
78  fill: #181818
79}