1.bookmarkBtn {
2  width: 130px;
3  height: 40px;
4  border-radius: 40px;
5  border: none;
6  background-color: rgb(255, 255, 255);
7  display: flex;
8  align-items: center;
9  justify-content: center;
10  cursor: pointer;
11  transition-duration: .3s;
12  overflow: hidden;
13  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.062);
14}
15
16.IconContainer {
17  width: 30px;
18  height: 30px;
19  background-color: rgb(103, 74, 228);
20  border-radius: 50%;
21  display: flex;
22  align-items: center;
23  justify-content: center;
24  overflow: hidden;
25  z-index: 2;
26  transition-duration: .3s;
27}
28
29.icon {
30  border-radius: 1px;
31}
32
33.text {
34  height: 100%;
35  width: 90px;
36  display: flex;
37  align-items: center;
38  justify-content: center;
39  color: rgb(26, 26, 26);
40  z-index: 1;
41  transition-duration: .3s;
42  font-size: 1.04em;
43  font-weight: 600;
44}
45
46.bookmarkBtn:hover .IconContainer {
47  width: 120px;
48  border-radius: 40px;
49  transition-duration: .3s;
50}
51
52.bookmarkBtn:hover .text {
53  transform: translate(10px);
54  width: 0;
55  font-size: 0;
56  transition-duration: .3s;
57}
58
59.bookmarkBtn:active {
60  transform: scale(0.95);
61  transition-duration: .3s;
62}