Customize de buttons in je Squarespace website.

Wil jij eens iets anders met de buttons in je Squarespace website. Je call to actions nét dat tikkeltje meer laten opvallen? Ik deel hier met jou een simpele code die je gemakkelijk kan aanpassen naar jouw eigen kleuren.

Buttons voor:

Buttons na:

---

Ga in je Squarespace menu naar de DESIGN tab, ga vervolgens naar CUSTOM CSS en voeg daar onderstaande code toe:

---

// START SMALL BUTTON EDIT //

.SQS-BLOCK-BUTTON-ELEMENT--SMALL {

PADDING: 18PX 22PX !IMPORTANT;

-WEBKIT-BOX-SHADOW: 5PX 5PX 0PX 0PX #FCEFE1;

-MOZ-BOX-SHADOW: 5PX 5PX 0PX 0PX #FCEFE1;

BOX-SHADOW: 5PX 5PX 0PX 0PX #FCEFE1;

BORDER: 1PX SOLID #FCEFE1 !IMPORTANT;

}

// END SMALL BUTTON EDIT //

// START MEDIUM BUTTON EDIT //

.SQS-BLOCK-BUTTON-ELEMENT--MEDIUM {

PADDING: 18PX 22PX !IMPORTANT;

-WEBKIT-BOX-SHADOW: 5PX 5PX 0PX 0PX #CF8E9D;

-MOZ-BOX-SHADOW: 5PX 5PX 0PX 0PX #CF8E9D;

BOX-SHADOW: 5PX 5PX 0PX 0PX #CF8E9D;

BORDER: 1PX SOLID #CF8E9D !IMPORTANT;

}

// END MEDIUM BUTTON EDIT //

// START LARGE BUTTON EDIT //

.SQS-BLOCK-BUTTON-ELEMENT--LARGE {

PADDING: 24PX 30PX !IMPORTANT;

-WEBKIT-BOX-SHADOW: 5PX 5PX 0PX 0PX #935D69;

-MOZ-BOX-SHADOW: 5PX 5PX 0PX 0PX #935D69;

BOX-SHADOW: 5PX 5PX 0PX 0PX #935D69;

BORDER: 1PX SOLID #935D69 !IMPORTANT;

}

// END LARGE BUTTON EDIT //

---

De kleurcodes kan je natuurlijk aanpassen aan je eigen huisstijlkleuren. Veel succes!