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
Tipps für die effiziente Nutzung von CSS-Stylesheets: Nutzen Sie die Leistungsfähigkeit von Stylesheets voll aus
Mit der kontinuierlichen Entwicklung der Internetw...
Detaillierte Erklärung zur Verwendung von Vue.prototype in Vue
Inhaltsverzeichnis 1. Einfaches Beispiel 2. Legen...
Mehrere spezifische Methoden zur MySQL-Speicherplatzbereinigung
Inhaltsverzeichnis Vorwort 1. Überprüfen Sie die ...
CSS3 erzielt verschiedene Randeffekte
Durchscheinender Rand Ergebnis: Implementierungsc...
CSS-Navigationsleistenmenü mit kleinem Dreieck-Implementierungscode
Viele Webseiten haben kleine Dreiecke in ihren Na...
Detaillierte Erläuterung der Dateisystemformate der EXT-Serie in Linux
Linux-Dateisystem In der Abbildung oben sind herk...
Eine kurze Erläuterung der Rolle und Funktionsweise von Schlüsseln in Vue3
Welche Funktion hat dieses Schlüsselattribut? Sch...
Reines CSS, um eine horizontale Linienanimation unter dem Element (Hintergrundbild) zu erreichen
Effektbild: html: <div class='site_bar'...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.11
Die Installations- und Konfigurationsmethoden von...
Vue implementiert Beispielcode zur Formulardatenvalidierung
Fügen Sie dem el-form-Formular Regeln hinzu: Defi...
In diesem Artikel erfahren Sie mehr über NULL in MySQL
Inhaltsverzeichnis Vorwort NULL in MySQL 2 NULL b...
Detaillierte Erklärung zur Konfiguration des sekundären Domänennamens auf einem Apache-Server in einer Linux-Umgebung
Dieser Artikel beschreibt, wie Sie einen sekundär...
DOCTYPE Dokumenttypdeklaration (unbedingt lesenswert für Webseiten-Liebhaber)
DOCTYPE-DEKLARATION: Oben auf jeder Seite, die Sie...
Vue implementiert eine kleine Countdown-Funktion
In vielen Projekten muss eine Countdown-Funktion ...
Tipps zum Mischen von OR und AND in SQL-Anweisungen
Heute gibt es eine solche Anforderung. Wenn die a...