button | کتابخانه کامپوننت‌ها

پیش‌نمایش زنده

کد HTML

<div class="ai-mode-component">
  <button class="ai-mode-button">
    <div class="blur-layer">
      <div class="rotating-gradient"></div>
    </div>

    <div class="gradient-layer">
      <div class="rotating-gradient"></div>
    </div>

    <div class="inner-bg"></div>

    <div class="button-content">
      <span class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path
            d="M17.5 12c0-3.04 2.46-5.5 5.5-5.5-3.04 0-5.5-2.46-5.5-5.5 0 3.04-2.46 5.5-5.5 5.5 3.04 0 5.5 2.46 5.5 5.5z"
          ></path>
          <path
            d="M15.65 11.58c.18-.5.27-1.03.31-1.58h-2c-.1 1.03-.51 1.93-1.27 2.69-.88.87-1.94 1.31-3.19 1.31C7.03 14 5 12.07 5 9.5 5 7.03 6.93 5 9.5 5c.46 0 .89.08 1.3.2l1.56-1.56C11.5 3.22 10.55 3 9.5 3 5.85 3 3 5.85 3 9.5S5.85 16 9.5 16c.56 0 2.26-.06 3.8-1.3l6.3 6.3 1.4-1.4-6.3-6.3c.4-.5.72-1.08.95-1.72z"
          ></path>
        </svg>
      </span>
      <span class="label">AI Mode</span>
    </div>
  </button>
</div>

کد CSS

/* Component Wrapper (local background allowed) */
.ai-mode-component {
  --btn-bg: #2c303d;
  --btn-text: #e8e8e8;
  --btn-border: #ffffff;
  --gradient-green: #34a853;
  --gradient-yellow: #ffd314;
  --gradient-red: #ff4641;
  --gradient-blue: #3186ff;

  display: flex;
  justify-content: center;
  align-items: center;
  background: #202124;
  padding: 4em;
  border-radius: 1em;
}

/* Button */
.ai-mode-button {
  background: var(--btn-bg);
  border: none;
  border-radius: 5em;
  cursor: pointer;

  font-size: 0.875em;
  font-weight: 400;
  line-height: 1.25em;

  height: 2.25em;
  padding: 0 1em 0 0.85em;

  position: relative;
  color: var(--btn-text);
  overflow: visible;

  transition: transform 0.15s ease;
}

/* Active (pressed) */
.ai-mode-button:active {
  transform: scale(0.97);
}

/* Focus Ring */
.ai-mode-button:focus-visible {
  outline: 0.15em solid var(--gradient-blue);
  outline-offset: 0.3em;
}

/* Outer border/glow */
.ai-mode-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  border: 0.07em solid var(--btn-border);
  background: rgba(255, 255, 255, 0.08);
  opacity: 0.4;
  transition:
    opacity 0.4s linear,
    background-color 0.4s linear;
}

.ai-mode-button:hover::before {
  opacity: 0;
}

/* Blur Layer */
.blur-layer,
.gradient-layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.blur-layer {
  opacity: 0.35;
  filter: blur(0.2em);
}

/* Rotating gradient */
.rotating-gradient {
  position: absolute;
  inset: 0;
  height: 200%;
  top: -50%;
  opacity: 0;

  background: conic-gradient(
    rgba(49, 134, 255, 0) 0deg,
    var(--gradient-green) 43deg,
    var(--gradient-yellow) 65deg,
    var(--gradient-red) 105deg,
    var(--gradient-blue) 144deg,
    var(--gradient-blue) 180deg,
    rgba(49, 134, 255, 0) 324deg,
    rgba(49, 134, 255, 0) 360deg
  );

  transform: rotate(180deg);
  scale: 2 1;
  transition: opacity 0.4s linear;
}

.ai-mode-button:hover .rotating-gradient {
  opacity: 1;
  animation: rotate-gradient 2s linear infinite;
}

@keyframes rotate-gradient {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(540deg);
  }
}

/* Inner background */
.inner-bg {
  position: absolute;
  inset: 0.15em;
  border-radius: inherit;
  background: var(--btn-bg);
  transition: filter 1s cubic-bezier(0, 0, 0, 1);
}

.ai-mode-button:hover .inner-bg {
  filter: blur(0.2em);
}

.inner-bg::after {
  content: "";
  position: absolute;
  inset: -0.7em;
  border-radius: inherit;
  background: var(--btn-bg);
  opacity: 0.5;
}

/* Button content */
.button-content {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 0.3em;
  align-items: center;
}

/* Icon */
.icon {
  width: 1.25em;
  height: 1.25em;
  display: flex;
}

.icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Text label */
.label {
  font-size: 1em;
  line-height: 1.25em;
}

نوع: button

تاریخ ایجاد: 2026/06/05

آخرین بروزرسانی: 2026/06/05