پیش‌نمایش زنده
کد HTML
<button class="button">Click Me</button>
کد CSS
.button {
  --button-accent: rgb(255, 0, 0);
  border: none;
  padding: 5px 20px;
  background: var(--button-accent);
  box-shadow: 0px 5px 0px 0px
      color-mix(in oklab, var(--button-accent) 80%, black),
    0px 5px 0px 5px black;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 900;
  color: white;
  text-shadow: 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
}
.button:active {
  box-shadow: 0px 0px 0px 0px color-mix(in oklab, var(--button-accent), black),
    0px 0px 0px 5px black;
  transform: translateY(5px);
}
نوع: button
تاریخ ایجاد: 2026/06/05
آخرین بروزرسانی: 2026/06/05