Trick # 222 | Dieser Beitrag beinhaltet 745 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Das Button-Modul des Divi-Themes umfasst ja bereits einige Einstellungsmöglichkeiten. Ein paar zusätzlich Spielereien sind aber allemal drin. Zum Beispiel können Sie den Schaltflächen beim hovern einen hübschen Glanzeffekt spendieren. Wir zeigen Ihnen wie.
Sie benötigen dafür CSS-Code. Kopieren Sie diesen und legen Sie ihn in das CSS-stylesheet Ihrer Website ab. Das Stylesheet finden Sie im Backend unter Design/Customizer/Zusätzliches CSS:
.et_pb_button {
overflow: hidden;
box-shadow: 0 0 0 0 transparent;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.et_pb_button:hover {
box-shadow: 0 0 30px 5px rgba(41, 50, 128, 0.5); /* Legen Sie hier Ihre Farbe fest
(es sollte die gleiche Farbe sein wie die der Schaltfläche bg bei Hover, aber mit einer Deckkraft von 0,5)
und spielen Sie mit den Werten 30px und 5px, um den Box-Shadow anzupassen */
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.et_pb_button:hover:before {
-webkit-animation: shine 0.5s 0s linear;
-moz-animation: shine 0.5s 0s linear;
animation: shine 0.5s 0s linear;
}
.et_pb_button:active {
box-shadow: 0 0 0 0 transparent;
-webkit-transition: box-shadow 0.2s ease-in;
-moz-transition: box-shadow 0.2s ease-in;
transition: box-shadow 0.2s ease-in;
}
.et_pb_button:before {
content: '';
display: block;
width: 0px;
height: 86%;
position: absolute;
top: 7%;
left: 0%;
opacity: 0;
background: #ffffff;
box-shadow: 0 0 60px 20px #ffffff; /*spielen Sie mit den Werten 60px und 20px, um den Box-Shadow anzupassen*/
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
}
.et_pb_button:after {
line-height: inherit !important;
}
@-webkit-keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
@-moz-keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
@keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
Der Effekt sieht dann aus wie nebenstehend gezeigt:
Werbung
Die Portfolio-Übersichten werden out of the box elegant in den Inhaltsbereich «eingeschoben». Das mag einigen der Spielerei zu viel sein. Wer die Liste lieber ohne Slide-In-Bewegung angezeigt erhalten möchte, kann die Animation ganz einfach ...
Das Button-Modul des Divi-Themes bietet die Möglichkeit, neben der Tastenbeschriftung ein Icon anzuzeigen. Dabei kommt jeweils ein Symbolbild aus dem Portfolio der Divi-Icons zum Zug. Doch dieses lässt sich auch mit einem Font-Awesome-Icon ...
Der Divi-Button lässt sich leicht auf der ganzen Seiten- oder Spaltenbreite anzeigen. Das ist vor allem dann hilfreich, wenn mehrere Buttons untereinander zu liegen kommen und untschiedliche Textlängen auf der Schaltfläche anzeigen. Wie's geht, ...
Das Internet ist bunt. Farben in allen Schattierungen - mal grell, mal pastell. Schwarz-weiss ist out. Falls die Website aber (aus welchem Grund auch immer) dauerhaft oder temporär in dezenten Grautönen dargestellt werden soll, hilft ein ...
Keine Inhalte gefunden.