پیش‌نمایش زنده
کد HTML
<button class="button">
  <div class="similar-line line-1"></div>
  <div class="similar-line line-2"></div>
  <div class="similar-line line-3"></div>
</button>
کد CSS
.button {
  cursor: pointer;
  position: relative;
  width: 5em;
  height: 4em;
  border: none;
  background: rgb(248, 66, 42);
  padding: 0.5em;
  display: flex;
  justify-content: center;
  gap: 0.7em;
  flex-direction: column;
  transition-duration: 0.5s;
}
.button:hover {
  background: rgb(7, 142, 253);
}
.similar-line {
  height: 0.2em;
  background: #fff;
  border-radius: 1em;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.line-1 {
  width: 40%;
}
.line-2 {
  width: 70%;
}
.line-3 {
  width: 90%;
}
.button:hover .line-1 {
  width: 90%;
}
.button:hover .line-2 {
  width: 70%;
}
.button:hover .line-3 {
  width: 40%;
}
نوع: button
تاریخ ایجاد: 2026/06/05
آخرین بروزرسانی: 2026/06/05