Heute eine kleine Anleitung, wie Du den „Nach-oben-Button“ dem Style Deiner Seite anpassen kannst.
Grundlegend besteht das CSS aus zwei Teilen, die für Dich relevant sind:
- .et_pb_scroll_top.et-pb-icon – Die Form und Postion des Buttons
- .et_pb_scroll_top:before – Das Zeichen, das im Button angezeigt wird
ScrollUp Button Variante 1
Hier ist nur die Hintergrundfarbe verändert und beide Ecken links mit einem Border-Radius von 50px eingestellt. Spiel mal mit den Zahlen beim zweiten Teil des Codes. 🙂 Du wirst sehen, dass sich das Zeichen im Button verändert.
/* Nach oben Button Style 1*/
.et_pb_scroll_top.et-pb-icon {
text-align: center;
background: #FBB03B; /* Hintergrundfarbe */
text-decoration: none;
position: fixed;
z-index: 99999;
bottom: 125px;
right: 0px;
-webkit-border-top-left-radius: 50px;
-webkit-border-bottom-left-radius: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-bottomleft: 50px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
display: none;
cursor: pointer;
font-size: 35px; /* Icongröße */
padding: 5px;
color: #fff;
}
.et_pb_scroll_top:before {
content: '6'; /* Icon im Button */
}
ScrollUp Button Variante 2
Hier habe ich den Radius komplett auf 50px gesetzt und den Button mit margin-right etwas nach innen geschoben.
/* Nach oben Button Style 2*/
.et_pb_scroll_top.et-pb-icon {
text-align: center;
background: #efefef; /* Hintergrundfarbe */
text-decoration: none;
position: fixed;
z-index: 99999;
bottom: 125px;
right: 0px;
-webkit-border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
border-radius: 50px;
display: none;
cursor: pointer;
font-size: 35px; /* Icongröße */
padding: 5px;
color: #fff;
margin-right: 10px;
border: 2px solid #222222;
-webkit-box-shadow: 0px 0px 9px -2px rgba(148,148,148,1);
-moz-box-shadow: 0px 0px 9px -2px rgba(148,148,148,1);
box-shadow: 0px 0px 9px -2px rgba(148,148,148,1);
}
.et_pb_scroll_top:before {
content: '6'; /* Icon im Button */
color: #222222; /* Icon Farbe */
}
ScrollUp Button Variante 3
Hier habe ich aus dem Kreis ein Dreieck gemacht und den content des zweiten Code-Teils komplett rausgenommen. Welche Formen Du noch mit CSS erzeugen kannst zeigt Dir dieses Tutorial: https://pixeltuner.de/css3-formen/
/* Nach oben Button Style 3*/
.et_pb_scroll_top.et-pb-icon {
text-align: center;
background-color: transparent;
width: 0;
height: 0;
border-bottom: 30px solid #037CA9;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
display: none;
cursor: pointer;
font-size: 0px; /* Icongröße */
padding: 0px;
margin-right: 10px;
border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
}
.et_pb_scroll_top:before {
content: ''; /* Icon im Button */
}
Wer macht den schönsten oder verrücktesten ScrollUp-Button? Schick uns Deine Kreationen mit einem Link oder poste Sie direkt unseren Facebook-Gruppen.
Viel Spaß beim gestalten!
Euer Frank
