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