Button by ZstarPanda0210

1#btn-message {
2  --text-color: #000;
3  --bg-color-sup: #d2d2d2;
4  --bg-color: #f4f4f4;
5  --bg-hover-color: #ffffff;
6  --online-status: #00da00;
7  --font-size: 16px;
8  --btn-transition: all 0.2s ease-out;
9}
10
11.button-message {
12  display: flex;
13  justify-content: center;
14  align-items: center;
15  font: 400 var(--font-size) Helvetica Neue, sans-serif;
16  box-shadow: 0 0 2.17382px rgba(0, 0, 0, 0.049),
17    0 1.75px 6.01034px rgba(0, 0, 0, 0.07),
18    0 3.63px 14.4706px rgba(0, 0, 0, 0.091), 0 22px 48px rgba(0, 0, 0, 0.14);
19  background-color: var(--bg-color);
20  border-radius: 68px;
21  cursor: pointer;
22  padding: 6px 10px 6px 6px;
23  width: fit-content;
24  height: 40px;
25  border: 0;
26  overflow: hidden;
27  position: relative;
28  transition: var(--btn-transition);
29}
30
31.button-message:hover {
32  height: 56px;
33  padding: 8px 20px 8px 8px;
34  background-color: var(--bg-hover-color);
35  transition: var(--btn-transition);
36}
37
38.button-message:active {
39  transform: scale(0.99);
40}
41
42.content-avatar {
43  width: 30px;
44  height: 30px;
45  margin: 0;
46  transition: var(--btn-transition);
47  position: relative;
48}
49
50.button-message:hover .content-avatar {
51  width: 40px;
52  height: 40px;
53}
54
55.avatar {
56  width: 100%;
57  height: 100%;
58  border-radius: 50%;
59  overflow: hidden;
60  background-color: var(--bg-color-sup);
61}
62
63.user-img {
64  width: 100%;
65  height: 100%;
66  object-fit: cover;
67}
68
69.status-user {
70  position: absolute;
71  width: 6px;
72  height: 6px;
73  right: 1px;
74  bottom: 1px;
75  border-radius: 50%;
76  outline: solid 2px var(--bg-color);
77  background-color: var(--online-status);
78  transition: var(--btn-transition);
79  animation: active-status 2s ease-in-out infinite;
80}
81
82.button-message:hover .status-user {
83  width: 10px;
84  height: 10px;
85  right: 1px;
86  bottom: 1px;
87  outline: solid 3px var(--bg-hover-color);
88}
89
90.notice-content {
91  display: flex;
92  flex-direction: column;
93  align-items: flex-start;
94  justify-content: center;
95  padding-left: 8px;
96  text-align: initial;
97  color: var(--text-color);
98}
99
100.username {
101  letter-spacing: -6px;
102  height: 0;
103  opacity: 0;
104  transform: translateY(-20px);
105  transition: var(--btn-transition);
106}
107
108.user-id {
109  font-size: 12px;
110  letter-spacing: -6px;
111  height: 0;
112  opacity: 0;
113  transform: translateY(10px);
114  transition: var(--btn-transition);
115}
116
117.lable-message {
118  display: flex;
119  align-items: center;
120  opacity: 1;
121  transform: scaleY(1);
122  transition: var(--btn-transition);
123}
124
125.button-message:hover .username {
126  height: auto;
127  letter-spacing: normal;
128  opacity: 1;
129  transform: translateY(0);
130  transition: var(--btn-transition);
131}
132
133.button-message:hover .user-id {
134  height: auto;
135  letter-spacing: normal;
136  opacity: 1;
137  transform: translateY(0);
138  transition: var(--btn-transition);
139}
140
141.button-message:hover .lable-message {
142  height: 0;
143  transform: scaleY(0);
144  transition: var(--btn-transition);
145}
146
147.lable-message,
148.username {
149  font-weight: 600;
150}
151
152.number-message {
153  display: flex;
154  justify-content: center;
155  align-items: center;
156  text-align: center;
157  margin-left: 8px;
158  font-size: 12px;
159  width: 16px;
160  height: 16px;
161  background-color: var(--bg-color-sup);
162  border-radius: 20px;
163}
164@keyframes active-status {
165  0% {
166    background-color: var(--online-status);
167  }
168
169  33.33% {
170    background-color: #93e200;
171  }
172
173  66.33% {
174    background-color: #93e200;
175  }
176
177  100% {
178    background-color: var(--online-status);
179  }
180}
181