Eine Sammlung von Button-Hover-Rand- und Hintergrundanimationen basierend auf CSS-Eigenschaften

<div Klasse="Hauptcontainer">
<Abschnitt>
<button class="btn btn-green btn-border-o">Schaltfläche 1</button>
<button class="btn btn-blue btn-border">Schaltfläche 2</button>
<button class="btn btn-purple btn-border-rev-o">Knopf Drei</button>
<button class="btn btn-navy btn-border-rev">Schaltfläche 4</button>
</Abschnitt>
<Abschnitt>
<button class="btn btn-orange btn-fill-vert-o">Schaltfläche Fünf</button>
<button class="btn btn-red btn-fill-vert">Schaltfläche 6</button>
<button class="btn btn-green btn-fill-horz-o">Schaltfläche 7</button>
<button class="btn btn-blue btn-fill-horz">Knopf Acht</button>
</Abschnitt>
</div>
*, *:vor, *:nach {
Übergang: alle 0,3 s;
}
Abschnitt {
Position: relativ;
Polsterung: 5px 0 5px;
Textausrichtung: zentriert;
}
.btn {
Position: relativ;
Anzeige: Inline-Block;
Zeilenhöhe: 35px;
Rand: 8px;
Polsterung: 0 15px;
Schriftgröße: 15px;
Rahmenradius: 3px;
Deckkraft: .999;
Cursor: Zeiger;
}
.btn-border-o {
Hintergrundfarbe: transparent;
Rand: 1px durchgezogen #d0d0d0;
Farbe: #B8B8B8;
}
.btn-border-o:vorher, .btn-border-o:nachher {
Inhalt: '';
Position: absolut;
Rahmenstil: durchgezogen;
Rahmenradius: 3px;
Box-Größe: Inhaltsbox;
}
.btn-border-o:vor {
links: 0;
oben: -1px;
Breite: 0;
Höhe: 100%;
Rahmenbreite: 1px 0 1px 0;
Übergangsverzögerung: 0,05 s;
}
.btn-border-o:nach {
oben: 0;
links: -1px;
Breite: 100 %;
Höhe: 0;
Rahmenbreite: 0 1px 0 1px;
}
.btn-border-o:hover:vor {
Breite: 100 %;
}
.btn-border-o:hover:nach {
Höhe: 100%;
}
.btn-border-o.btn-green:vorher, .btn-border-o.btn-green:nachher {
Rahmenfarbe: #2ecc71;
}
.btn-border-o.btn-green:hover {
Farbe: #2ecc71;
}
.btn-Grenze {
Hintergrundfarbe: #e5e5e5;
Rand: 1px durchgezogen #e5e5e5;
Farbe: #a6a6a6;
}
.btn-border:vorher, .btn-border:nachher {
Position: absolut;
Inhalt: '';
Rahmenstil: durchgezogen;
Rahmenradius: 3px;
Box-Größe: Inhaltsbox;
}
.btn-border:vor {
oben: -1px;
links: 0;
Breite: 0;
Höhe: 100%;
Rahmenbreite: 1px 0 1px 0;
Übergangsverzögerung: 0,05 s;
}
.btn-border:nach {
oben: 0;
links: -1px;
Breite: 100 %;
Höhe: 0;
Rahmenbreite: 0 1px 0 1px;
}
.btn-border:hover {
Hintergrundfarbe: transparent;
}
.btn-border:hover:vor {
Breite: 100 %;
}
.btn-border:hover:nach {
Höhe: 100%;
}
.btn-border.btn-blue:vorher, .btn-border.btn-blue:nachher {
Rahmenfarbe: #3498db;
}
.btn-border.btn-blue:hover {
Farbe: #3498db;
}
.btn-border-rev-o {
Hintergrundfarbe: transparent;
Rand: 1px durchgezogen #d0d0d0;
Farbe: #B8B8B8;
}
.btn-border-rev-o:vorher, .btn-border-rev-o:nachher {
Inhalt: '';
Position: absolut;
Rahmenstil: durchgezogen;
Rahmenradius: 3px;
Box-Größe: Inhaltsbox;
}
.btn-border-rev-o:vor {
oben: -1px;
rechts: 0;
Breite: 0;
Höhe: 100%;
Rahmenbreite: 1px 0 1px 0;
Übergangsverzögerung: 0,05 s;
}
.btn-border-rev-o:nach {
links: -1px;
unten: 0;
Breite: 100 %;
Höhe: 0;
Rahmenbreite: 0 1px 0 1px;
}
.btn-border-rev-o:hover:vor {
Breite: 100 %;
}
.btn-border-rev-o:hover:nach {
Höhe: 100%;
}
.btn-border-rev-o.btn-purple:vorher, .btn-border-rev-o.btn-purple:nachher {
Rahmenfarbe: #9b59b6;
}
.btn-border-rev-o.btn-purple:hover {
Farbe: #9b59b6;
}
.btn-border-rev {
Hintergrundfarbe: #e5e5e5;
Rand: 1px durchgezogen #e5e5e5;
Farbe: #a6a6a6;
}
.btn-border-rev:vorher, .btn-border-rev:nachher {
Inhalt: '';
Position: absolut;
Rahmenstil: durchgezogen;
Rahmenradius: 3px;
Box-Größe: Inhaltsbox;
}
.btn-border-rev:vor {
oben: -1px;
rechts: 0;
Breite: 0;
Höhe: 100%;
Rahmenbreite: 1px 0 1px 0;
}
.btn-border-rev:nach {
unten: 0;
links: -1px;
Breite: 100 %;
Höhe: 0;
Rahmenbreite: 0 1px 0 1px;
Übergangsverzögerung: 0,05 s;
}
.btn-border-rev:hover {
Hintergrundfarbe: transparent;
}
.btn-border-rev:hover:vor {
Breite: 100 %;
}
.btn-border-rev:hover:nach {
Höhe: 100%;
}
.btn-border-rev.btn-navy:vorher, .btn-border-rev.btn-navy:nachher {
Rahmenfarbe: #34495e;
}
.btn-border-rev.btn-navy:hover {
Farbe: #34495e;
}
.btn-fill-vert-o {
Hintergrundfarbe: transparent;
Rand: 1px durchgezogen #d0d0d0;
Farbe: #B8B8B8;
Überlauf: versteckt;
}
.btn-fill-vert-o:vorher, .btn-fill-vert-o:nachher {
Inhalt: '';
Position: absolut;
links: 0;
Breite: 100 %;
Höhe: 0;
Deckkraft: 0;
z-Index: -1;
}
.btn-fill-vert-o:vor {
oben: 50 %;
}
.btn-fill-vert-o:nach {
unten: 50 %;
}
.btn-fill-vert-o:hover {
Farbe: #fff;
}
.btn-fill-vert-o:hover:vorher, .btn-fill-vert-o:hover:nachher {
Höhe: 50%;
Deckkraft: 1;
}
.btn-fill-vert-o.btn-orange:vorher, .btn-fill-vert-o.btn-orange:nachher {
Hintergrundfarbe: #e67e22;
}
.btn-fill-vert-o.btn-orange:hover {
Rahmenfarbe: #e67e22;
}
.btn-fill-vert {
Hintergrundfarbe: #e5e5e5;
Rand: 1px durchgezogen #e5e5e5;
Farbe: #a6a6a6;
Überlauf: versteckt;
}
.btn-fill-vert:vorher, .btn-fill-vert:nachher {
Inhalt: '';
Position: absolut;
Breite: 100 %;
Höhe: 0;
Deckkraft: 0;
links: 0;
z-Index: -1;
}
.btn-fill-vert:vor {
oben: 50 %;
}
.btn-fill-vert:nach {
unten: 50 %;
}
.btn-fill-vert:hover {
Farbe: #fff;
}
.btn-fill-vert:hover:vorher, .btn-fill-vert:hover:nachher {
Höhe: 50%;
Deckkraft: 1;
}
.btn-fill-vert.btn-red:vorher, .btn-fill-vert.btn-red:nachher {
Hintergrundfarbe: #e74c3c;
}
.btn-fill-vert.btn-red:hover {
Rahmenfarbe: #e74c3c;
}
.btn-fill-horz-o {
Hintergrundfarbe: transparent;
Rand: 1px durchgezogen #d0d0d0;
Farbe: #B8B8B8;
Überlauf: versteckt;
}
.btn-fill-horz-o:vorher, .btn-fill-horz-o:nachher {
Inhalt: '';
Position: absolut;
oben: 0;
Breite: 0;
Höhe: 100%;
Deckkraft: 0;
z-Index: -1;
}
.btn-fill-horz-o:vor {
links: 50%;
}
.btn-fill-horz-o:nach {
rechts: 50%;
}
.btn-fill-horz-o:hover {
Farbe: #fff;
}
.btn-fill-horz-o:hover:vorher, .btn-fill-horz-o:hover:nachher {
Breite: 50%;
Deckkraft: 1;
}
.btn-fill-horz-o.btn-green:vorher, .btn-fill-horz-o.btn-green:nachher {
Hintergrundfarbe: #2ecc71;
}
.btn-fill-horz-o.btn-green:hover {
Rahmenfarbe: #2ecc71;
}
.btn-fill-horz {
Hintergrundfarbe: #e5e5e5;
Rand: 1px durchgezogen #e5e5e5;
Farbe: #a6a6a6;
Überlauf: versteckt;
}
.btn-fill-horz:vorher, .btn-fill-horz:nachher {
Inhalt: '';
Position: absolut;
oben: 0;
Breite: 0;
Höhe: 100%;
Deckkraft: 0;
z-Index: -1;
}
.btn-fill-horz:vor {
links: 50%;
}
.btn-fill-horz:nach {
rechts: 50%;
}
.btn-fill-horz:hover {
Farbe: #fff;
}
.btn-fill-horz:hover:vorher, .btn-fill-horz:hover:nachher {
Breite: 50%;
Deckkraft: 1;
}
.btn-fill-horz.btn-blue:vorher, .btn-fill-horz.btn-blue:nachher {
Hintergrundfarbe: #3498db;
}
.btn-fill-horz.btn-blue:hover {
Rahmenfarbe: #3498db;
}