Basic Controls and Selectors

CSS gradient buttons

A set of modern gradient buttons with glow, outlines, and press feedback.

HTMLCSSButtonGradient

With JavaScript enabled, you can edit, run, and save this example. The fixed source is as follows:

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS gradient buttons</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>Make buttons more expressive</h1>
    <p>Hover to see the light sweep; press to feel the subtle shift feedback. All effects are handled by CSS.</p>
    <div class="buttons" aria-label="Gradient Button Example">
      <button class="ocean" type="button">Deep Sea Blue</button>
      <button class="sunset" type="button">Sunset Orange</button>
      <button class="forest" type="button">Rainforest green</button>
      <button class="aurora" type="button">Aurora Outline</button>
    </div>
  </main>
</body>
</html>