پیش‌نمایش زنده
کد HTML
<button class="luxury-button">
  <span class="button-text">Luxury</span>
  <span class="velvet-sheen"></span>
</button>
کد CSS
.luxury-button {
  position: relative;
  padding: 20px 55px;
  font-size: 20px;
  font-family: Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: #f0e4e4;
  background: #5a2e5a;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Velvet base texture */
  background-image: linear-gradient(
    135deg,
    rgba(90, 46, 90, 0.9),
    rgba(45, 15, 45, 0.8)
  );
  background-blend-mode: overlay;
  background-size: cover;
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.4),
    inset -3px -3px 6px rgba(255, 255, 255, 0.1),
    6px 6px 16px rgba(0, 0, 0, 0.5),
    -4px -4px 12px rgba(255, 255, 255, 0.05);
}

/* Stitching effect */
.luxury-button::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border-radius: 10px;
  border: 2px dashed #d4a5a5;
  opacity: 0.7;
  box-shadow:
    inset 1px 1px 2px rgba(0, 0, 0, 0.3),
    1px 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

/* Silk accent layer */
.luxury-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -150%;
  width: 150%;
  height: 30%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(240, 200, 200, 0.3),
    transparent
  );
  transform: translateY(-50%);
  opacity: 0.8;
  transition: all 0.5s ease;
  pointer-events: none;
}

/* Velvet sheen */
.velvet-sheen {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  opacity: 0;
  transition: all 0.4s ease;
  pointer-events: none;
}

/* Hover effects */
.luxury-button:hover {
  transform: translateY(-3px);
  background-image: linear-gradient(
    135deg,
    rgba(100, 56, 100, 0.9),
    rgba(55, 25, 55, 0.8)
  );
  box-shadow:
    inset 2px 2px 5px rgba(0, 0, 0, 0.4),
    inset -2px -2px 5px rgba(255, 255, 255, 0.15),
    8px 8px 20px rgba(0, 0, 0, 0.55),
    -6px -6px 14px rgba(255, 255, 255, 0.08);
}

.luxury-button:hover::before {
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  opacity: 0.9;
  border-color: #e0b5b5;
}

.luxury-button:hover::after {
  left: 100%;
}

.luxury-button:hover .velvet-sheen {
  opacity: 0.8;
  left: 100%;
}

/* Active (pressed) state */
.luxury-button:active {
  transform: translateY(2px);
  background-image: linear-gradient(
    135deg,
    rgba(70, 26, 70, 0.9),
    rgba(35, 5, 35, 0.8)
  );
  box-shadow:
    inset 5px 5px 10px rgba(0, 0, 0, 0.5),
    inset -2px -2px 5px rgba(255, 255, 255, 0.05);
}

.luxury-button:active::before {
  top: 7px;
  left: 7px;
  right: 7px;
  bottom: 7px;
  opacity: 0.5;
  border-color: #c49595;
}

/* Text embossing */
.button-text {
  position: relative;
  z-index: 1;
  text-shadow:
    1px 1px 2px rgba(0, 0, 0, 0.4),
    -1px -1px 2px rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.luxury-button:hover .button-text {
  text-shadow:
    1px 1px 3px rgba(0, 0, 0, 0.5),
    -1px -1px 3px rgba(255, 255, 255, 0.25);
}

.luxury-button:active .button-text {
  text-shadow:
    0px 0px 1px rgba(0, 0, 0, 0.3),
    0px 0px 1px rgba(255, 255, 255, 0.1);
}

/* Sheen animation on focus */
.luxury-button:focus .velvet-sheen {
  animation: velvet-sweep 0.6s ease-out;
}

@keyframes velvet-sweep {
  0% {
    left: -100%;
    opacity: 0;
  }
  50% {
    left: 0;
    opacity: 0.8;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}
نوع: button
تاریخ ایجاد: 2026/06/05
آخرین بروزرسانی: 2026/06/05