1.icon-btn {
2  width: 50px;
3  height: 50px;
4  border: 1px solid #cdcdcd;
5  background: white;
6  border-radius: 25px;
7  overflow: hidden;
8  position: relative;
9  transition: width 0.2s ease-in-out;
10  font-weight: 500;
11  font-family: inherit;
12}
13
14.add-btn:hover {
15  width: 120px;
16}
17
18.add-btn::before,
19.add-btn::after {
20  transition: width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
21  content: "";
22  position: absolute;
23  height: 4px;
24  width: 10px;
25  top: calc(50% - 2px);
26  background: seagreen;
27}
28
29.add-btn::after {
30  right: 14px;
31  overflow: hidden;
32  border-top-right-radius: 2px;
33  border-bottom-right-radius: 2px;
34}
35
36.add-btn::before {
37  left: 14px;
38  border-top-left-radius: 2px;
39  border-bottom-left-radius: 2px;
40}
41
42.icon-btn:focus {
43  outline: none;
44}
45
46.btn-txt {
47  opacity: 0;
48  transition: opacity 0.2s;
49}
50
51.add-btn:hover::before,
52.add-btn:hover::after {
53  width: 4px;
54  border-radius: 2px;
55}
56
57.add-btn:hover .btn-txt {
58  opacity: 1;
59}
60
61.add-icon::after,
62.add-icon::before {
63  transition: all 0.2s ease-in-out;
64  content: "";
65  position: absolute;
66  height: 20px;
67  width: 2px;
68  top: calc(50% - 10px);
69  background: seagreen;
70  overflow: hidden;
71}
72
73.add-icon::before {
74  left: 22px;
75  border-top-left-radius: 2px;
76  border-bottom-left-radius: 2px;
77}
78
79.add-icon::after {
80  right: 22px;
81  border-top-right-radius: 2px;
82  border-bottom-right-radius: 2px;
83}
84
85.add-btn:hover .add-icon::before {
86  left: 15px;
87  height: 4px;
88  top: calc(50% - 2px);
89}
90
91.add-btn:hover .add-icon::after {
92  right: 15px;
93  height: 4px;
94  top: calc(50% - 2px);
95}