Buttons

Note that buttons use Code blocks to display properly. You'll have to copy and paste a little bit of code, but it's easy stuff.

Why are we using code for buttons, you ask? Easy-peasy. Using code allows the buttons to be responsive, which means they'll look great and be usable on any screen size.


The Code

Here's the base code you'll need for a button:

<a href="#" target="_blank" class="btn safe-btn">Deal With It</a>

Which will give you this:

 

How to Use the Code

 
  1. Copy the HTML below (highlight then Cmd + C): 
    <a href="#" class="btn safe-btn">Button Text</a>
  2. In the Squarespace admin, click + Add Block and choose Code
  3. Clear the code in the textbox and paste the button code you just copied (Cmd + A then Cmd + V)
  4. Replace the # in href="#" with the URL of where this link is going (ie. http://www.zoobean.com)
  5. Replace Button Text with whatever you want the button to say
  6. Set the color of the button. In class="btn safe-btn", swap safe-btn with whatever color you want from the list of classes below.
  7. Click Save
  8. This is what it looks like in the admin after it's saved. Right clicking that block will bring up the HTML, if you want to change the color or text.

Button Colors

Below is a list of button colors and their associated classes for reference. Don't worry about the class names of the buttons, you can use the colors and sizes however you want. Choosing the right size of a button (half width vs. full width) is purely based on the length of the text inside the button. All buttons become full sized at the mobile size breakpoint.

 

Half-width buttons:

color-one-btn

color-three-btn

color-two-btn

color-four-btn

color-five-btn

 
 
 

Full-width buttons:

color-one-btn full

color-two-btn full

color-three-btn full

color-five-btn full

color-four-btn full