1.btn {
2  cursor: pointer;
3  width: 50px;
4  height: 50px;
5  border: none;
6  position: relative;
7  border-radius: 10px;
8  -webkit-box-shadow: 1px 1px 5px .2px #00000035;
9  box-shadow: 1px 1px 5px .2px #00000035;
10  -webkit-transition: .2s linear;
11  transition: .2s linear;
12  transition-delay: .2s;
13  display: -webkit-box;
14  display: -ms-flexbox;
15  display: flex;
16  -webkit-box-align: center;
17  -ms-flex-align: center;
18  align-items: center;
19  -webkit-box-pack: center;
20  -ms-flex-pack: center;
21  justify-content: space-between;
22}
23
24.btn:hover {
25  width: 150px;
26  transition-delay: .2s;
27}
28
29.btn:hover > .paragraph {
30  visibility: visible;
31  opacity: 1;
32  -webkit-transition-delay: .4s;
33  transition-delay: .4s;
34}
35
36.btn:hover > .icon-wrapper .icon {
37  transform: scale(1.1);
38}
39
40.bnt:hover > .icon-wrapper .icon path {
41  stroke: black;
42}
43
44.paragraph {
45  color: black;
46  visibility: hidden;
47  opacity: 0;
48  font-size: 18px;
49  margin-right: 20px;
50  padding-left: 20px;
51  -webkit-transition: .2s linear;
52  transition: .2s linear;
53  font-weight: bold;
54  text-transform: uppercase;
55}
56
57.icon-wrapper {
58  width: 50px;
59  height: 50px;
60  position: absolute;
61  top: 0;
62  right: 0;
63  display: flex;
64  align-items: center;
65  justify-content: center;
66}
67
68.icon {
69  transform: scale(.9);
70  transition: .2s linear;
71}
72
73.icon path {
74  stroke: #000;
75  stroke-width: 2px;
76  -webkit-transition: .2s linear;
77  transition: .2s linear;
78}