Regenbogen-Button-Stil erstellt mit CSS3

<div Klasse="Schaltflächen">
  <h1>Einfache Hover-Effekte mit <code>box-shadow</code></h1>
  <button class="fill">Ausfüllen</button>
  <button class="pulse">Puls</button>
  <button class="close">Schließen</button>
  <button class="raise">Erhöhen</button>
  <button class="up">Auffüllen</button>
  <button class="slide">Folie</button>
  <button class="offset">Versatz</button>
</div>

/*
  https://developer.mozilla.org/en/docs/Web/CSS/box-shadow
  Box-Shadow: [Einschub?] [oben] [links] [Unschärfe] [Größe] [Farbe];

  Tipps:
    – Wir setzen alle Unschärfen auf 0, da wir eine solide Füllung wünschen.
    - Fügen Sie das Schlüsselwort „inset“ hinzu, damit sich der Box-Shadow auf der Innenseite des Elements befindet.
    - Durch die Animation des eingefügten Schattens beim Hovern sieht es so aus, als würde das Element von der von Ihnen angegebenen Seite aus ausgefüllt ([oben] und [links] akzeptieren negative Werte, um zu [unten] und [rechts] zu werden).
    - Mehrere Schatten können gestapelt werden
    - Wenn Sie mehrere Schatten animieren, achten Sie darauf, dass Sie die gleiche Anzahl an Schatten verwenden, damit die Animation flüssig ist. Andernfalls wird das Ergebnis abgehackt.
*/
.füllen:schweben,
.fill:fokus {
  Box-Schatten: Einschub 0 0 0 2em var(--hover);
}

.puls:schweben,
.puls:fokus {
  -Webkit-Animation: Puls 1 s;
          Animation: Puls 1 s;
  Kastenschatten: 0 0 0 2em rgba(255, 255, 255, 0);
}

@-webkit-keyframes Puls {
  0% {
    Kastenschatten: 0 0 0 0 var(--hover);
  }
}

@keyframes Puls {
  0% {
    Kastenschatten: 0 0 0 0 var(--hover);
  }
}
.schließen:schweben,
.schließen:Fokus {
  Boxschatten: Einschub -3,5em 0 0 0 var(--hover), Einschub 3,5em 0 0 0 var(--hover);
}

.erhöhen:schweben,
.erhöhen:Fokus {
  Kastenschatten: 0 0,5em 0,5em -0,4em var(--hover);
  transformieren: übersetzenY(-0,25em);
}

.hoch:schweben,
.up:Fokus {
  Boxschatten: Einschub 0 -3,25em 0 0 var(--hover);
}

.schieben:schweben,
.Folie:Fokus {
  Box-Schatten: Einschub 6,5em 0 0 0 var(--hover);
}

.offset {
  Kastenschatten: 0,3em 0,3em 0 0 var(--color), Einschub 0,3em 0,3em 0 0 var(--color);
}
.offset:hover, .offset:fokus {
  Kastenschatten: 0 0 0 0 var(--hover), Einschub 6em 3,5em 0 0 var(--hover);
}

.füllen {
  --Farbe: #a972cb;
  --hover: #cb72aa;
}

.puls {
  --Farbe: #ef6eae;
  --hover: #ef8f6e;
}

.schließen {
  --Farbe: #ff7f82;
  --hover: #ffdc7f;
}

.erheben {
  --Farbe: #ffa260;
  --hover: #e5ff60;
}

.hoch {
  --Farbe: #e4cb58;
  --hover: #94e458;
}

.gleiten {
  --Farbe: #8fc866;
  --hover: #66c887;
}

.offset {
  --Farbe: #19bc8b;
  --hover: #1973bc;
}

Taste {
  Farbe: var(--color);
  Übergang: 0,25 s;
}
Schaltfläche:Hover, Schaltfläche:Fokus {
  Rahmenfarbe: var(--hover);
  Farbe: #fff;
}

Körper {
  Farbe: #fff;
  Hintergrund: #17181c;
  Schriftart: 300 1em „Fira Sans“, serifenlos;
  Inhalt ausrichten: zentriert;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  Textausrichtung: zentriert;
  Mindesthöhe: 100vh;
  Anzeige: Flex;
}

Taste {
  Hintergrund: keiner;
  Rand: 2px durchgezogen;
  Schriftart: erben;
  Zeilenhöhe: 1;
  Rand: 0,5em;
  Polsterung: 1em 2em;
}

h1 {
  Schriftstärke: 400;
}

Code {
  Farbe: #e4cb58;
  Schriftart: erben;
}