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

Create a standard squarespace button through code

Question

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>
     </a>
   </div>
 </div>
</div>

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

8 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>
<html>
<head>
<style>
.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;
}
</style>
</head>
<body>


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


</body>
</html>

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

http://www.thecustomsquare.com/plugins/buttons

@evanlemmons

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
  • 0
On 7/22/2019 at 12:54 AM, philmace said:

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

How do you copy the code that's created? I did dev tools -- inspect -- but not sure what I'm looking for? 

Share this post


Link to post
  • 0
On 8/31/2016 at 11:42 AM, evanlemmons said:

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>
     </a>
   </div>
 </div>
</div>

 

 

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

How can I change the color of the text when hovered?

 

Thanks!!

 

JQ

Share this post


Link to post
  • 0
17 hours ago, IIIJQIII said:

How can I change the color of the text when hovered?

 

Thanks!!

 

JQ

Add to Home > Design > Custom CSS

.sqs-block-button-element:hover a {color: green !important;}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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...