Squarespace buttons stylen: zo doe je dat
Ultieme handleiding voor kleuren, vormen & hover‑effecten
Heb je ooit een website bezocht met zo’n opvallende en kleurrijke knop dat je er gewoon op móést klikken? Net zoals die fluorgroene button ‘Spreek met Anouk’ hierboven die precies opvalt en je meteen uitnodigt om actie te ondernemen… 😉
Squarespace buttons zijn misschien klein, maar ze hebben een grote impact op je conversies, je merkbeleving en de gebruikservaring van je website. De juiste kleur, vorm en interactie effecten kunnen het verschil maken tussen een klik en een gemiste kans.
In deze handleiding leer je hoe je jouw buttons laat opvallen. Eenvoudig en met praktische stappen en zonder en met direct kopieerbare CSS code.
Squarespace Fluid Engine kent drie button stijlen die elk hun eigen doel hebben:
Stijl 1
Primary button
Voor je belangrijkste call-to-action. Gebruik spaarzaam en één per sectie is ideaal.
Stijl 2
Secondary button
Ondersteunende acties die minder aandacht vragen, maar toch klikbaar moeten zijn.
Stijl 3
Tertiary button
Subtiele links of alternatieven, soms ook weergegeven als tekstlink met onderlijning.
Voor alle drie types kun je kleur, vorm, padding, lettertype en hover stijl instellen zowel via het Site Styles paneel als via Custom CSS.
2. Button kleuren aanpassen zonder code
Het Site Styles paneel van Squarespace geeft je directe visuele controle over al je Squarespace buttons. Zo ga je te werk:
Log in op Squarespace en klick de Edit om je website aan te passen.
Klik rechtsboven op het kwast icoon om Site Styles te openen.
Navigeer naar Buttons, kies daar rechts de pijl ‘>’, kies Primary, Secondary of Tertiary.
Klik op Colors in Site Styles en selecteer het kleurthema van de betreffende sectie.
Klik op het potlood icoon om achtergrond-, tekst- en randkleur te bewerken.
Kies onder Buttons een vorm: pill (afgerond), rounded (licht afgerond) of square (scherpe hoeken).
Stel padding en lettertype in voor optimale leesbaarheid.
Mijn pro tip
Wil je meerdere button kleuren op één pagina zonder code? Gebruik verschillende secties met verschillende kleurthema's. Squarespace past de buttonkleur automatisch aan per section thema. Dit is de meest onderhoudsvriendelijke aanpak.
3. Hover effecten instellen
Squarespace biedt standaard twee hover effecten die je instelt vanuit Site Styles:
Fill: de button behoudt zijn achtergrondkleur bij hover en je past alleen de hover kleur aan.
No Fill: de button toont bij rust alleen een rand en tekst. Bij hover vult hij met kleur. Elegant en modern.
Voor de meeste websites zijn deze opties meer dan voldoende. Wil je specifieke hover kleuren of animaties die buiten het paneel vallen, dan is Custom CSS de volgende stap.
4. Geavanceerde button stijlen met CSS
Ga in Squarespace het dashboard naar Website > Pages > Custom Code (helemaal onderaan) > Custom CSS en plak daar de onderstaande code.
A. Hover kleur aanpassen
De meest gebruikte CSS aanpassing: een andere achtergrondkleur tonen wanneer de bezoeker over de knop zweeft.
.sqs-block-button-element:hover {
background-color: #009999;
color: #ffffff;
transition: all 0.25s ease;
}
B. Solide naar outline op hover
Een populair effect: de button begint gevuld en transformeert bij hover naar een transparante outline-stijl.
.sqs-block-button .sqs-block-button-element--medium {
border: 2px solid #000000 !important;
transition: all 0.25s ease;
}
.sqs-block-button .sqs-block-button-element--medium:hover {
background-color: transparent;
border: 2px solid #000000 !important;
color: #000000;
}
C. Gradient button
Gradient-knoppen geven je site een dynamischer, hedendaags karakter. Dit effect werkt op de primaire button-klasse van Squarespace Fluid Engine:
.sqs-button-element--primary {
background-image: linear-gradient(90deg, #FF7E5F, #FEB47B);
color: #fff !important;
border: none; transition: opacity 0.25s ease;
}
.sqs-button-element--primary:hover {
opacity: 0.88;
}
D. Alleen één specifieke button targeten
Wil je slechts één button op de pagina stijlen? Voeg in het button-instellingen-paneel een HTML-anchor toe (bijv. #mijn-cta), en gebruik die als CSS-selector:
#mijn-cta .sqs-block-button-element {
background-color: #7c3aed;
color: #ffffff;
border-radius: 50px;
}
De knop in je navigatieheader heeft een eigen stijlpaneel in Squarespace. Zo open je het:
Hover in de Edit mode over de header in je Squarespace website > klik op Edit Site Header.
Ga naar de header button > dubbelklik erop > ga naar het het tabblad Design binnen het venstertje
Kies een van drie buttons.
Voor extra controle kun je de header button targeten via CSS:
.header-nav-item--cta .btn {
background-color: #D3FF4E;
color: #ffffff !important;
border-radius: 10px; padding: 0.55rem 1.25rem;
}
.header-nav-item--cta .btn:hover {
background-color: #D3FF4E;
}
6. Praktische design tips voor professionele Squarespace buttons
Consistentie telt
Hou button vormen en kleuren consistent met je merkpalet. Kies één primaire kleur en één accentkleur en houd je daar aan.
Korte teksten werken beter
Houd button teksten onder de 25 tekens. "Vraag offerte aan" werkt beter dan "Klik hier voor meer informatie over onze diensten".
Gebruik sectie-thema's slim
Meerdere buttonkleuren op één pagina? Gebruik verschillende kleurthema's per sectie — geen code nodig.
Contrast is cruciaal
Zorg voor een contrastverhouding van minimaal 4,5:1 tussen tekst en button achtergrond voor toegankelijkheid (WCAG AA). Gebruik zeker een contrast checker zoals Coolors.co
Test op mobiel
Hover effecten werken niet op touchscreens. Zorg dat ook de standaard er goed uitziet.
Een primaire CTA per section
Te veel verschillende knoppen leiden tot keuzestress. Geef de bezoeker één duidelijke richting per section.
Conclusie
Buttons zijn kleine elementen met een grote impact. Door zorgvuldig kleur, vorm en interactie stijl te kiezen, kun je jouw Squarespace website zowel visueel aantrekkelijk als functioneel maken. Of je nu alles via het kwast icoon (Site Styles) doet of extra CSS stijlen inzet met de juiste aanpak zorg je ervoor dat jouw knoppen niet alleen passen bij je huisstijl, maar ook uitnodigen tot actie.
Laat je Squarespace website optimaal werken
Van buttons tot volledige strategische redesign. Ik help je een site bouwen die converteert. Klantenreviews bevestigen het: samenwerken met Made by Anouk geeft je website een directe professionaliseringsslag en hogere conversies.
7. Veelgestelde vragen over Squarespace buttons
-
Ja. Gebruik verschillende secties met verschillende kleurthema's. Squarespace past de buttonkleur automatisch aan per section. Zo krijg je meerdere kleuren zonder een regel CSS te schrijven. Dit is ook de meest onderhoudsvriendelijke aanpak voor de toekomst.
-
Fill: de button heeft altijd een volle achtergrondkleur.
No Fill: de button toont bij rust alleen een rand en tekst (transparante achtergrond), en vult bij hover met kleur. No Fill werkt goed voor secundaire acties die minder nadruk verdienen.
-
Squarespace kan CSS code aanpassen bij grote updates. Controleer na een platform update altijd kort of je custom CSS nog werkt. De klassen .sqs-block-button-element en .sqs-button-element--primary zijn over het algemeen stabiel in Fluid Engine, maar een periodieke check blijft verstandig.
-
Ja, met @keyframes in Custom CSS. Hou het subtiel. Te veel beweging leidt tot irritatie in plaats van conversie. Een lichte transform: translateY(-2px) op hover geeft al een professionele "lift" illlusie zonder afleiding.
-
Voeg in het button blok een HTML-anchor in (te vinden in de blok-instellingen onder "Anchor"). Geef het een unieke naam zoals cta-hero. Gebruik dan #cta-hero .sqs-block-button-element als CSS-selector om alleen die button te targeten.
-
Op de website van Ghost plugin vind je effectieve CSS code voor basisaanpassingen. Gebruik deze gratis snippets van Ghost
