پیش‌نمایش زنده
کد HTML
<button class="button">
  Button
</button>
کد CSS
.button {
  padding: 10px 20px;
  font-size: 1.1rem;
  background-color: rgb(255, 209, 81);
  border: none;
  color: white;
  position: relative;
  width: 120px;
  height: 45px;
  transition: background-color 0.2s ease-in, all 0.15s ease-in;
}

button::after {
  display: flex;
  align-items: center;
  justify-content: center;
  content: "Button";
  width: 120px;
  height: 45px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(5px, 5px);
  background-color: rgb(255, 187, 0);
  transition: all 0.15s ease-in;
}

button:hover::after {
  transform: translate(-5px, -5px);
}

button:hover {
  transform: translate(5px, 5px);
}

button:active::after {
  background-color: rgb(207, 152, 0);
}
نوع: button
تاریخ ایجاد: 2026/06/05
آخرین بروزرسانی: 2026/06/05