Button Effects
CSS Code Snipets für Button Effekte
Button reveal Section on Click
Vorlage von DeGani abgeändert für Swiss-CV:
Importieren:
– Button
– CF Desktop
– CF Tablet & Phone
Folgendes beachten:
Bei Integrations: HEAD einfügen
<script type=”text/javascript”>
jQuery(function($){
jQuery(‘.button’).click(function() {
jQuery(‘.popup’).css(‘display’, ‘block’);
});
jQuery(‘.close’).click(function() {
jQuery(‘.popup’).css(‘display’, ‘none’);
});});
</script>
Button hat CLASS zugeordnet
Siehe auch CSS bei Section und Blurb für Design-Änderungen
All buttons on same height
https://www.youtube.com/watch?v=Z4WbY5aW0zs
(sehr gut und simple)
All buttons on same width
Achtung: Wenn der Button mit dem Text breiter ist als 180 px sieht man keinen Effekt. Pixelbreite deshalb testen resp. anpassen. (Am besten dem Button, der am meisten Text enthält)
Je nachdem wo CSS positioniert wird, ist Wirkung auf ganzer Webseite oder nur einzelner Seite.
Divi/Theme Options/Allgemein/CSS:
/*All Buttons same width*/
.et_pb_button { min-width: 180px; text-align:center; }
@media only screen and (min-width: 981px) {
#buttonsamesize .et_pb_button {
min-width: 180px;
text-align: center;
}
}
2 Buttons in Header
Hover Sliding Button Effects (cool - TSC)
Roll-Back Button nach Divi Update Problem
Roll-back Button
Bei Divi Theme Options
Ab Divi 3.6 besteht die Möglichkeit, zur vorherigen Divi Version mit einem einzigen Klick zurückzukehren.
Back-to-Top Button
customize – Josh Video: