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
Zabbix3.4-Methode zum Überwachen des MongoDB-Datenbankstatus
Mongodb verfügt über einen Befehl db.serverStatus...
XHTML verwendet einige veraltete Elemente in HTML nicht mehr
Wenn wir CSS-Webseitenlayouts erstellen, wissen wi...
Detailliertes Installationstutorial für Mysql5.7.19 unter Centos7
1. Herunterladen Laden Sie mysql-5.7.19-linux-gli...
So installieren Sie binäres MySQL unter Linux und knacken das MySQL-Passwort
1. Stellen Sie sicher, dass das System über die e...
Beispiel für die Verwendung von JS zur nativen Implementierung des Jahreskarussell-Auswahleffekts
Vorwort Verwenden Sie js, um einen Jahresrotation...
Detaillierte Schritte zur Installation von JDK und Tomcat in einer Linux-Umgebung
Inhaltsverzeichnis 1. JDK installieren Manuelle I...
Beispiel für die Erstellung eines XML-Online-Editors mit js
Inhaltsverzeichnis Vorwort Die Notwendigkeit von ...
Detaillierte Analyse des MySQL 8.0-Speicherverbrauchs
Inhaltsverzeichnis 1. innodb_buffer_pool_size 2. ...
Installieren Sie MySQL offline mit RPM unter CentOS 6.4
Verwenden Sie das RPM-Installationspaket, um MySQ...
So fahren Sie MySQL sicher herunter
Beim Herunterfahren des MySQL-Servers können, abh...
So legen Sie Verknüpfungssymbole in Linux fest
Vorwort Durch das Erstellen von Verknüpfungen in ...
VUE Erste Schritte Erlernen der Ereignisbehandlung
Inhaltsverzeichnis 1. Funktionsbindung 2. Mit Par...
Erfahren Sie in fünf Minuten mehr über React Routing
Inhaltsverzeichnis Was ist Routing Grundlegende V...
Lösung für das Problem, dass der obere Rand des untergeordneten Elements dazu führt, dass sich das übergeordnete Element verschiebt
Problembeschreibung Als ich heute den Seitenstil ...
Drei häufig verwendete MySQL-Datentypen
Das Definieren des Datenfeldtyps in MySQL ist für...