پیش‌نمایش زنده
کد HTML
<div class="wrapper">
  <button class="button">Confirm Transaction</button>
</div>
کد CSS
.wrapper {
  border-radius: 48px;
  box-shadow:
    inset 12px 0 12px rgba(255, 255, 255, 0.25),
    inset -2px -4px 8px rgba(255, 255, 255, 0.25);
  background: linear-gradient(
    336deg,
    rgba(255, 196, 32, 1) 0%,
    rgba(254, 75, 8, 1) 39%,
    rgba(254, 75, 8, 1) 57%,
    rgba(255, 196, 32, 1) 100%
  );
}

.button {
  cursor: pointer;
  padding: 0.75rem 1.5rem;
  border-radius: inherit;
  font-weight: 600;
  position: relative;
  border: none;
  background: transparent;
  color: #fff;
  transition: all 0.2s;
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  inset-block-end: -2px;
  border-radius: inherit;
  background: linear-gradient(to top, #ffc42088, transparent);
  z-index: -1;
  filter: blur(5px);
  transition: all 0.2s;
}

.button:hover::before {
  filter: blur(0);
  opacity: 0;
}

button:active {
  transform: scale(0.95);
}

button:focus {
  outline-color: #fff;
}
نوع: button
تاریخ ایجاد: 2026/06/05
آخرین بروزرسانی: 2026/06/05