Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Create a standard squarespace button through code


I want to create a button with an icon in it but I want it to look identical to all the standard buttons on the site and have it change colors/fonts as the admin changes it in the Squarespace back end. Here's the code I'm using (copied directly from the source for a standard button)

<div class=“sqs-block button-block sqs-block-button”>
 <div class=“sqs-block-content”>
   <div class=“sqs-block-button-container--center”>
     <a href class=“sqs-block-button-element--large sqs-block-button-element”>
       <i class="ion-hammer"></i> <span>See The Architect Plans</span>

And it's not styling at all when I past that into a code block. Any help would be appreciated.

Edited by evanlemmons
Initial Revision

Share this post

Link to post

5 answers to this question

Recommended Posts

  • 1

Hey @evanlemmons (and whoever else was looking for this)! I was trying to do the same thing. Disclaimer : I have zero knowledge in coding. I just used www.w3schools.com to get some basic knowledge and use their exercices to cobble together the code by trial and error. Here's what I came up with :

<!DOCTYPE html>
.button {
   float: right;
   background-color: white;
   border: none;
   color: white;
   padding: 1px 12px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-family: Source Sans Pro;
   font-size: 12px;
   font-weight: 400;
   font-style: normal;
   text-transform: uppercase;
   letter-spacing: 3px;
   margin-top: 56px;
   margin-bottom: 12px;
   margin-right: 20px;
   margin-left: 12px;
   cursor: pointer;

<h3><a href="/en/transcription" class="button">ENGLISH</h3></a>


I was trying to make a translate button, that's why mine says "English", but your could just put in whatever values you need. Mine was for the Om template. I used the Code Injection section in "Avanced" in the page properties. It shows up as a white button on the top right of the screen, with the same font as a small button in Om. In order to find the font formatting for a small button in Om, I created one and then previewed the page, right-clicked on the button and clicked on Inspect element (in Chrome).

Share this post

Link to post
  • 0

This isn't exactly answering that question and I've had similar issues but I stopped messing with it after I came across this site with every button animation and style you could think of specifically built for Squarespace. It come with a designer tool and allows you to even style the form and newsletter buttons as well. Pretty sweet. You see all of them here



Share this post

Link to post
  • 0

Unfortunately I couldn't figure it out. No hyperlink injected into the header of my cover page works. I ended up making a simple link within the text of the given space http://alfkalimah.com/ar/home

Amolla's code made such a pretty button, though :(

Edited by khayrab
Initial Revision

Share this post

Link to post
  • 0

There is an easy way for dummies.

Put a button on the post/page and then copy the code that is created then paste the code via code insert.

Now you can input a click to call button

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...