Composants de base et sélecteurs

CSS bouton dégradé

Un ensemble de boutons dégradés modernes avec effets lumineux, contour et retour au clic.

HTMLCSSBoutonDégradé

Après activation de JavaScript, ce cas peut être modifié, exécuté et enregistré. Code source fixe ci-dessous :

<!doctype html>
<html lang="fr" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS bouton dégradé</title>
  <style>
    * { box-sizing: border-box; }
    :root { color-scheme: dark; }
    body {
      min-height: 100vh;
      margin: 0;
      display: grid;
      place-items: center;
      overflow-x: hidden;
      color: #f8fbff;
      font-family: "Trebuchet MS", "Microsoft YaHei", sans-serif;
      background:
        radial-gradient(circle at 15% 20%, rgba(0, 213, 255, .2), transparent 28rem),
        radial-gradient(circle at 85% 80%, rgba(255, 68, 151, .18), transparent 25rem),
        #07101f;
    }
    .panel {
      width: min(860px, calc(100% - 32px));
      padding: clamp(30px, 6vw, 64px);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 32px;
      background: rgba(11, 24, 44, .78);
      box-shadow: 0 32px 90px rgba(0, 0, 0, .42);
      backdrop-filter: blur(16px);
    }
    .eyebrow { color: #70e8ff; font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
    h1 { margin: 10px 0 12px; font-family: Georgia, "STSong", serif; font-size: clamp(34px, 7vw, 64px); line-height: 1; }
    p { margin: 0 0 38px; color: #9eb0c9; line-height: 1.7; }
    .buttons { display: flex; flex-wrap: wrap; gap: 18px; }
    button {
      position: relative;
      min-width: 148px;
      padding: 15px 24px;
      overflow: hidden;
      border: 0;
      border-radius: 999px;
      color: white;
      font: inherit;
      font-weight: 800;
      letter-spacing: .04em;
      cursor: pointer;
      transform: translateY(0);
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }
    button::after {
      content: "";
      position: absolute;
      inset: -120% 45%;
      width: 36px;
      background: rgba(255,255,255,.46);
      transform: rotate(25deg);
      transition: transform .55s ease;
    }
    button:hover::after { transform: translateX(220px) rotate(25deg); }
    button:hover { transform: translateY(-4px); filter: saturate(1.2); }
    button:active { transform: translateY(1px) scale(.98); }
    button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
    .ocean { background: linear-gradient(110deg, #0675ff, #00d5ff); box-shadow: 0 14px 34px rgba(0, 174, 255, .3); }
    .sunset { background: linear-gradient(110deg, #ff416c, #ff9a3d); box-shadow: 0 14px 34px rgba(255, 78, 105, .3); }
    .forest { background: linear-gradient(110deg, #067a63, #86d53d); box-shadow: 0 14px 34px rgba(70, 190, 117, .26); }
    .aurora {
      padding: 13px 22px;
      border: 2px solid transparent;
      background: linear-gradient(#101b32, #101b32) padding-box,
                  linear-gradient(110deg, #7f5cff, #26e6b5) border-box;
      box-shadow: 0 14px 34px rgba(127, 92, 255, .22);
    }
    @media (max-width: 560px) { .buttons button { flex: 1 1 100%; } }
    @media (prefers-reduced-motion: reduce) { *, *::after { transition-duration: .01ms !important; } }
  </style>
</head>
<body>
  <main class="panel">
    <div class="eyebrow">CSS Interaction Set</div>
    <h1>Donnez plus d’émotion aux boutons</h1>
    <p>Survolez pour voir le scintillement, appuyez pour ressentir un subtil retour de déplacement. Tous les effets sont réalisés par CSS.</p>
    <div class="buttons" aria-label="Exemple de bouton en dégradé">
      <button class="ocean" type="button">Bleu océan profond</button>
      <button class="sunset" type="button">Orange coucher de soleil</button>
      <button class="forest" type="button">Vert forêt tropicale</button>
      <button class="aurora" type="button">Contour d’aurore</button>
    </div>
  </main>
</body>
</html>