JSFiddle - React, Tailwind, and code Playground

by Jens Kühn

HTML

<!-- Variante A: Gradient nur im Text -->
  <button>
    <span class="gradient-text">Ask AI</span>
  </button>

  <!-- Variante B: Gradient-Text + Shimmer -->
  <button>
    <span class="gradient-text shimmer">Chat mit KI</span>
  </button>

CSS

/* Farben bequem per CSS-Variablen anpassbar */
  :root{
    --g1:#7c3aed; /* violet */
    --g2:#06b6d4; /* cyan */
    --g3:#22c55e; /* green */
  }

  button {
    font: 600 16px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    padding: 10px 16px;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
  }

  /* Nur der Text hat den Verlauf */
  .gradient-text {
    background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3));
    background-size: 200% 100%;
    background-position: 0 0;

    /* der Trick: Hintergrund in den Text clippen */
    -webkit-background-clip: text;
    background-clip: text;

    /* Text selbst transparent machen (cross-browser) */
    color: transparent;
    -webkit-text-fill-color: transparent;

    transition: background-position .6s ease;
  }
  button:hover .gradient-text {
    background-position: 100% 0;
  }

  /* Optional: dezente Shimmer-Animation */
  .shimmer {
    background-size: 300% 100%;
    animation: shimmer-move 1s ease infinite;
  }
  @keyframes shimmer-move {
    0%   { background-position:   0% 0; }
    50%  { background-position: 100% 0; }
    100% { background-position:   0% 0; }
  }
  /* Barrierefreiheit: Animation auf Wunsch aus */
  @media (prefers-reduced-motion: reduce) {
    .shimmer { animation: none; }
  }