Eine Sammlung von Button-Hover-Rand- und Hintergrundanimationen basierend auf CSS-Eigenschaften
|
Herzattribute opacity: .999 erstellt einen Stapelkontext für das Element, sodass die Animationen der Schaltflächen 6 und 8 nicht durch den Hintergrund verdeckt werden left/top: -1px bewirkt, dass das Pseudoelement mit der Buttonposition übereinstimmt, der Grund ist folgender Übergangsverzögerung Die horizontalen und vertikalen Randanimationen erzeugen einen subtilen Verzögerungseffekt z-index: -1 verhindert, dass der von der Animation generierte Farbblock den Buttontext überdeckt Das absolute Element mit den festgelegten Werten links/oben/rechts/unten wird relativ zur Polsterungsbox des übergeordneten Elements positioniert. Daher muss das Pseudoelement hier um eine Randdistanz verschoben werden, um mit der Position der Schaltfläche übereinzustimmen. Andernfalls tritt der folgende Effekt ein:
Sie können sehen, dass zwischen dem grünen Rand und dem grauen Rand ein Abstand von 1px besteht
<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;
}Zusammenfassen Oben finden Sie eine Sammlung von Button-Hover-Rändern und Hintergrundanimationen basierend auf CSS-Eigenschaften, die ich Ihnen vorgestellt habe. Ich hoffe, dass sie Ihnen hilfreich sein werden. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Ursachen und Lösungen für den MySQL-Fehler „zu viele Verbindungen“
>>: So führen Sie den Betrieb nach dem Verlassen des Docker-Containers weiter aus
Artikel empfehlen
Bootstrap FileInput implementiert Bild-Upload-Funktion
In diesem Artikelbeispiel wird der spezifische Co...
W3C Tutorial (1): W3C verstehen
Das W3C, eine 1994 gegründete Organisation, zielt...
Zusammenfassung des Tutorials zur Installation und Bereitstellung von KVM für die VMware-Virtualisierung
Virtualisierung 1. Umwelt Centos7.3 Deaktivieren ...
Ubuntu 18.04 Ein-Klick-Upgrade aller Python-Pakete von Drittanbietern und Installation von Python-Paketen
1. Was ist Pip pip ist ein Python-Paketverwaltung...
Mysql Workbench - Abfragemethode für MySQL-Datenbanken
Mysql Workbench ist ein Open-Source-Datenbankclie...
JS implementiert Click-Drop-Effekt
js realisiert den Spezialeffekt des Klickens und ...
js realisiert bidirektionale Datenbindung (Accessor-Überwachung)
In diesem Artikelbeispiel wird der spezifische Co...
So überwachen Sie die Windows-Leistung auf Zabbix
Hintergrundinformationen Ich habe kürzlich einige...
Ausführliche Erklärung der Umgebungsvariablen und Konfigurationsdateien in CentOS
Vorwort Das Konfigurationsdateisystem der CentOS-...
Beispiel für horizontale und vertikale Zentrierung eines Div-Unterelements mit CSS
Div-Grundlayout <div Klasse="Haupt"&...
So stellen Sie Gitlab mit Docker-Compose bereit
Docker-Compose stellt Gitlab bereit 1. Docker ins...
Lösung für den Fehler, dass IE6 select nicht durch div abgedeckt werden kann
Verwenden Sie div, um eine Maske zu erstellen oder...
Detaillierter Prozess zur Bereitstellung von MySQL mit Docker (allgemeine Anwendungen, die mit Docker bereitgestellt werden)
Ich habe es Ihnen bereits vorgestellt: Docker (Be...
Docker verwendet Supervisor zur Verwaltung von Prozessvorgängen
Ein Docker-Container startet beim Start beispiels...
Tabellen dynamisch in HTML hinzufügen_PowerNode Java Academy
Ohne weitere Umschweife werde ich den Code direkt...