Button by vinodjangid07

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: 0.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: 50px;
20  display: flex;
21  align-items: center;
22  justify-content: center;
23  overflow: hidden;
24  z-index: 2;
25  transition-duration: 0.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: 0.3s;
41  font-size: 1.04em;
42}
43
44.bookmarkBtn:hover .IconContainer {
45  width: 90px;
46  transition-duration: 0.3s;
47}
48
49.bookmarkBtn:hover .text {
50  transform: translate(10px);
51  width: 0;
52  font-size: 0;
53  transition-duration: 0.3s;
54}
55
56.bookmarkBtn:active {
57  transform: scale(0.95);
58  transition-duration: 0.3s;
59}
60