Buttons stylen (Formen, Farben & Ränder) bei 7.1 - inklusive Hover-Effekten
Du hast bestimmt schon oft gelesen, dass Buttons perfekt sind, um deine Call-to-Actions (also Handlungsaufrufe) auf deiner Website schön ins Auge fallen zu lassen.
Und ja, sie laden definitiv mehr zum Klicken ein als ein ganz normaler Link!
In meinen Kursen und Videos nerve ich deswegen immer alle damit, dass sie UUUNBEDINGT Buttons ans Ende jeder Seite setzen sollen. Vor allem, wenn mich jemand fragt, wie man einen “Nach oben”-Knopf bei Squarespace einrichtet. Dann sage ich: “Neeeein! Tu’s nicht!” 😬
Denn ich finde: Eine Seite mit einem guten Call-to-action in Form eines Buttons am Ende bringt dir viel mehr! Denn wenn die Leute “nach oben” gehen, weißt du nicht, wo sie als Nächstes landen. Stattdessen kannst du mit einem Aufruf-Button genau steuern, wo du sie strategisch als Nächstes hinführen willst.
So. So viel dazu 😊
Allerdings ist da natürlich die Frage: Wie kann ich meine Buttons bei Squarespace schön stylen?
Deswegen zeige ich dir hier, wie du einen Hover-Effekt anlegen kannst, einzelne Buttons umfärbst, deinen Buttons schöne Ränder verpasst und vieles mehr.
Legen wir los!
👉 Deine Squarespace-Website ist noch in der Fertigstellung? Wenn du Neukunde bist, bekommst du hier mit dem Code VICTORIA10 nach der gratis Testphase einen Rabatt von 10% auf dein erstes Jahr. (Das ist natürlich ein Werbelink.)
Tipp: Ganz neu richten wir für dich als Blogleser alternativ sogar einen special 20%-Rabatt ein. → Bekommst du hier.
So stylst du deine Buttons ganz einfach: Farben, Ränder (auch besondere Farben!)
Sieh dir hier das Video an, wie du das machen kannst:
Hier in schriftlich, falls du das nicht als Video angucken willst:
Um deine Buttons in ihrer Form zu stylen, gehst du unter Design > Buttons und stylst die Buttons (Größen: Primär, sekundär, tertiär - früher hießen sie einfach Groß, Mittel, Klein - das war viel besser!).
Das heißt, du hast drei Arten an Grund-Form-Stylings, die du frei festlegen kannst:
Hier kannst du die Ränder, Dicke und Schrift für jede der drei Button-Arten auswählen.
Wenn du allerdings die Farbe ändern willst, musst du unter Design > Farbe gehen.
Bei Squarespace gibt es 10 verschiedene Styling-Optionen für Abschnitte, die du einstellen kannst. Sie heißen “Fein 1”, “Besonders Fein 1” etc. Unter diesen Abschnitten kannst du alles, was du möchtest, bearbeiten.
Geh also auf den Abschnitt, den du möchtest, und suche dir die Buttons heraus.
Dann klickst du dort, wo du unten die grünen Pfeile siehst, und wählst die Farben aus:
Wichtig: Diese Farbeinstellung gilt NUR für den Abschnittsfarbentyp, den du ausgewählt hast.
Wenn du dieselbe Farbe auch woanders haben möchtest, musst du in die anderen Abschnitte gehen.
Wenn du das schwer verständlich findest, scrolle einfach hoch zum Video, da zeige ich dir genau, wie das geht!
Hover-Effekte bei Squarespace-Buttons einrichten
Sehr oft bekomme ich die Frage, wie man noch besonderere Hover-Effekte für Buttons hinbekommt.
Falls dir das nichts sagt: Ein Hover-Effekt bedeutet, dass der Button sich ändert, wenn man mit der Maus darüber fährt.
Um deine Buttons mit Hover-Effekten zu stylen, brauchst du ein kleines bisschen CSS. Aber keine Sorge: Ich gebe dir hier die genauen Codes, die du einfach kopieren und einfügen kannst. Und zwar unter Design > Benutzerdefiniertes CSS.
Artikeltipp: So funktioniert CSS bei Squarespace (+ 10 super Tipps!)
Anleitung: Hover-Effekt für alle Buttons
Wenn du alle Buttons mit demselben Effekt haben möchtest, ist das ziemlich einfach: Dazu verwendest du diesen CSS-Schnipsel:
//Button-Hover-Farbe
.sqs-block-button-element:hover {background-color:#56a832; color:#000000}
Jetzt musst du noch die beiden HEX-Farbcodes ändern:
#000000 steht für Schwarz. Das ist die Textfarbe des Buttons.
#56a832 ist ein Grünton. Das ist die Hintergrundfarbe des Buttons.
Diese beiden Farbcodes musst du also austauschen und deine Wunsch-Farbcodes einsetzen.
Hover-Effekt und Rand für verschiedene Buttons
Wie du bestimmt gemerkt hast, kannst du bei Squarespace unterschiedliche Button-Größen vergeben. Wenn du also nur den kleinsten Button ändern willst, kannst du das ebenfalls tun:
Dazu musst du das Folgende kopieren und bei Design > Benutzerdefiniertes CSS eingeben:
//Styling der Buttons
.sqs-block-button .sqs-block-button-element--small {
background-color: transparent !important;
color: #56a832 !important;
border: 1px solid #000000;
}
Jetzt kannst du noch Folgendes ändern:
#000000 steht für Schwarz. Das ist die Textfarbe des Button-Randes. Wenn dein Button KEINEN Rand haben soll, lässt du die letzte Zeile (border: ….) einfach weg.
#56a832 ist ein Grünton. Das ist die Farbe des Buttons.
Diese beiden Farbcodes musst du also austauschen und deine Wunsch-Farbcodes einsetzen.
Als Nächstes kannst du noch den Hover-Effekt festlegen:
.sqs-block-button .sqs-block-button-element--small:hover {
color: black !important;
font-weight: bold;
opacity: 1;
border: 1px solid black;
}
Dasselbe funktioniert auch für den großen Button. Das erkennst du am Wort “large” statt “small” in der ersten Zeile:
.sqs-block-button .sqs-block-button-element--large:hover {
color: white !important;
font-weight: bold;
background-color: black !important;
opacity: 1;
border: 1px solid black;
}
Hier habe ich die Farbe auf Weiß gesetzt und den Schrifttyp auf “Bold”; also fett.
Du kannst auch hier alle Zeilen wegnehmen oder mit den Angaben von oben oder deinen eigenen Farben kombinieren.
Willst du mit deiner Squarespace-Website endlich weiter oben bei Google auftauchen?
Sieh dir hier meinen top bewerteten 0€ Workshop an, wie du endlich besser erscheinst:
So passt du bei den drei Hover-Beispielen konkret das Ganze auf deinen Stil an
Ersetze “small” durch “medium” für den mittelgroßen Button oder “large” für den großen Button
Ersetze den #….. Code hinter “color” durch deinen gewünschten Farbcode
border: 1px bedeutet, dass es einen 1 Pixel großen Rand gibt, und zwar in der Farbe #…. Wenn du den nicht möchtest, löscht du die Zeile einfach. Oder du änderst die Farbe oder Dicke des Randes (andere Pixelzahl oder anderer Farbcode).
👉 Ständig frische Tipps für deine Squarespace-Website? Abonniere jetzt meinen Youtube-Kanal mit laufend neuen Tutorials! 🎥
Viel Spaß beim Stylen deiner Buttons! Wenn du eine Frage dazu hast, schreib sie einfach in die Kommentare.