پیش‌نمایش زنده
کد HTML
<button class="button">
  Button
</button>
کد CSS
.button {
  padding: 10px 20px;
  font-size: 1.1rem;
  background-color: rgb(89, 182, 35);
  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: white;
  color: rgb(53, 144, 0);
  border: 2px solid rgb(53, 144, 0);
  transition: all 0.15s ease-in;
}

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

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

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