Sechs mit CSS3 implementierte Randübergangseffekte

<h1>CSS-Rahmenübergänge</h1>

<Abschnitt Klasse="Schaltflächen">
  <button class="draw">Zeichnen</button>

  <button class="draw meet">Treffen zeichnen</button>

  <button class="center">Mitte</button>

  <button class="spin">Drehen</button>

  <button class="spin circle">Kreis drehen</button>

  <button class="spin thick">Dick drehen</button>
</Abschnitt>

Taste {
  Hintergrund: keiner;
  Rand: 0;
  Box-Größe: Rahmenbox;
  Rand: 1em;
  Polsterung: 1em 2em;
  Box-Schatten: Einschub 0 0 0 2px #f45e61;
  Farbe: #f45e61;
  Schriftgröße: erben;
  Schriftstärke: 700;
  Position: relativ;
  vertikale Ausrichtung: Mitte;
}
button::vorher, button::nachher {
  Box-Dimensionierung: erben;
  Inhalt: "";
  Position: absolut;
  Breite: 100 %;
  Höhe: 100%;
}

.ziehen {
  Übergang: Farbe 0,25 s;
}
.draw::vorher, .draw::nachher {
  Rand: 2px durchgehend transparent;
  Breite: 0;
  Höhe: 0;
}
.draw::vor {
  oben: 0;
  links: 0;
}
.draw::nach {
  unten: 0;
  rechts: 0;
}
.draw:hover {
  Farbe: #60daaa;
}
.draw:hover::vorher, .draw:hover::nachher {
  Breite: 100 %;
  Höhe: 100%;
}
.draw:hover::vor {
  Rahmenfarbe oben: #60daaa;
  Rahmenfarbe rechts: #60daaa;
  Übergang: Breite 0,25 s, Auslaufen, Höhe 0,25 s, Auslaufen 0,25 s;
}
.draw:hover::nach {
  Rahmenunterseite-Farbe: #60daaa;
  Rahmenfarbe links: #60daaa;
  Übergang: Rahmenfarbe 0 s, Auslaufzeit 0,5 s, Breite 0,25 s, Auslaufzeit 0,5 s, Höhe 0,25 s, Auslaufzeit 0,75 s;
}

.treffen:hover {
  Farbe: #fbca67;
}
.treffen::nach {
  oben: 0;
  links: 0;
}
.treffen:hover::vorher {
  Rahmenfarbe oben: #fbca67;
  Rahmenfarbe rechts: #fbca67;
}
.treffen:hover::nach {
  Farbe des unteren Rahmens: #fbca67;
  Rahmenfarbe links: #fbca67;
  Übergang: Höhe 0,25 s, Auslaufen, Breite 0,25 s, Auslaufen 0,25 s;
}

.center:hover {
  Farbe: #6477b9;
}
.center::vorher, .center::nachher {
  oben: 0;
  links: 0;
  Höhe: 100%;
  Breite: 100 %;
  Transform-Origin: Mitte;
}
.center::vor {
  Rahmen oben: 2px durchgezogen #6477b9;
  Rahmen unten: 2px durchgezogen #6477b9;
  transformieren: scale3d(0, 1, 1);
}
.center::nach {
  Rahmen links: 2px durchgezogen #6477b9;
  Rahmen rechts: 2px durchgezogen #6477b9;
  transformieren: scale3d(1, 0, 1);
}
.center:hover::vorher, .center:hover::nachher {
  transformieren: scale3d(1, 1, 1);
  Übergang: Transformation 0,5 s;
}

.drehen {
  Breite: 5em;
  Höhe: 5em;
  Polsterung: 0;
}
.spin:hover {
  Farbe: #0eb7da;
}
.spin::vorher, .spin::nachher {
  oben: 0;
  links: 0;
}
.spin::vor {
  Rand: 2px durchgehend transparent;
}
.spin:hover::vorher {
  Rahmenfarbe oben: #0eb7da;
  Rahmenfarbe rechts: #0eb7da;
  Farbe des unteren Rahmens: #0eb7da;
  Übergang: Rahmenfarbe oben 0,15 s linear, Rahmenfarbe rechts 0,15 s linear 0,1 s, Rahmenfarbe unten 0,15 s linear 0,2 s;
}
.spin::nach {
  Rand: 0 durchgehend transparent;
}
.spin:hover::nach {
  Rahmen oben: 2px durchgezogen #0eb7da;
  Rahmenbreite links: 2px;
  Rahmenbreite rechts: 2px;
  transformieren: drehen (270 Grad);
  Übergang: Transformation 0,4 s linear 0 s, linke Rahmenbreite 0 s linear 0,35 s;
}

.Kreis {
  Randradius: 100 %;
  Kastenschatten: keiner;
}
.circle::vorher, .circle::nachher {
  Randradius: 100 %;
}

.dick {
  Farbe: #f45e61;
}
.dick:hover {
  Farbe: #fff;
  Schriftstärke: 700;
}
.dick::vor {
  Rand: 2,5em durchgehend transparent;
  z-Index: -1;
}
.dick::nach {
  Mix-Blend-Modus: Farbe ausweichen;
  z-Index: -1;
}
.dick:hover::vor {
  Hintergrund: #f45e61;
  Farbe des oberen Rahmens: #f45e61;
  Rahmenfarbe rechts: #f45e61;
  Farbe des unteren Rahmens: #f45e61;
  Übergang: Hintergrund 0 s linear 0,4 s, Rahmenfarbe oben 0,15 s linear, Rahmenfarbe rechts 0,15 s linear 0,15 s, Rahmenfarbe unten 0,15 s linear 0,25 s;
}
.dick:hover::nach {
  Rahmen oben: 2,5em durchgezogen #f45e61;
  Rahmenbreite links: 2,5em;
  Rahmenbreite rechts: 2,5em;
}

/* Seitenstil */
html {
  Hintergrund: #fefefe;
}

Körper {
  Hintergrund: #fefefe;
  Farbe: #4b507a;
  Schriftart: 300 24px/1,5 Lato, serifenlos;
  Rand: 1em automatisch;
  maximale Breite: 36em;
  Polsterung: 1em 1em 2em;
  Textausrichtung: zentriert;
}

.buttons {
  Isolierung: isolieren;
}

h1 {
  Schriftstärke: 300;
  Schriftgröße: 2,5em;
}