Jump to content

How do I change styling for only one button?

Recommended Posts

I want to emphasize the call-to-action on certain pages. The standard styling across all buttons is a white-text/black-background button with orange-text hover. I want to make the call-to-action a white-text/orange-background button with black-text hover. However, this emphasis means I only want it done on one or two buttons here and there.

On most pages, I want the "View Schedule" button to have this emphasis. On this Rates page for example, I want the emphasis placed at the bottom on the "I'M NEW! SIGN ME UP!" button. Any advice?

http://www.bodychemistrystudio.com/rates/

Link to comment
  • Replies 19
  • Views 59.5k
  • Created
  • Last Reply

I've done this on client sites by inserting the button code as a code block that can have custom styling applied to it.

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

Ugh... Need help still...

This is the code I grabbed for the big "I'm New! Sign Me Up!" button at http://www.bodychemistrystudio.com/rates/


<div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-yui_3_10_1_1_1399386807918_223800">
<div class="sqs-block-content">
<div class="sqs-block-button-container--center">
<a href="/new-client-signup" class="sqs-block-button-element--large sqs-block-button-element">I'm New! Sign Me Up!
</a>
</div>
</div>
</div>

QUESTIONS:

(1) How do I change the background (black) colour of this box to match a #d34b27 (orange) colour? (2) How do I change the hover-over text (white) colour of this box to match a #000000 (black) colour?

Link to comment

The code above won't really help you. I will amend it slightly so that you can style it.

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

I stripped down the code you gave as an example and added unique IDs to the containing div and the a link so that they can be easily targeted for styling.

In a Markdown block insert the following:


<div class="sqs-block-button-container--center" id="cta-button-container">
<a href="/new-client-signup" class="sqs-block-button-element--large sqs-block-button-element" id="cta-button">I'm New! Sign Me Up!
 </a>
</div>

Then, in Custom CSS insert the following:


#cta-button-container {
text-align: center !important;
}



#cta-button {
text-align: center !important;
background-color: #d95430;
border-radius: 300px;
-webkit-box-shadow: 0 3px 0 0 #b13f21;
-moz-box-shadow: 0 3px 0 0 #b13f21;
box-shadow: 0 3px 0 0 #b13f21;
position: relative;
-webkit-transition: .1s background-color linear;
-moz-transition: .1s background-color linear;
-o-transition: .1s background-color linear;
transition: .1s background-color linear;
padding: 25px 46px;
color: #fff;
border-color: #d34b27;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
font-style: normal;
width: 220px;
}



#cta-button:hover {
background-color: #fff;
border-radius: 300px;
-webkit-box-shadow: 0 5px 0 0 #b13f21;
-moz-box-shadow: 0 5px 0 0 #b13f21;
box-shadow: 0 5px 0 0 #b13f21;
position: relative;
-webkit-transition: .1s background-color linear;
-moz-transition: .1s background-color linear;
-o-transition: .1s background-color linear;
transition: .1s background-color linear;
color: #d95430;
}



I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment
  • 10 months later...

How to do something even simple..?i need to change only a color of a certain buttonI use this:


#collection-5513e13de4b05d27e68b6b79 
 .sqs-block-button-element  
 {color: #ff0000; !important;}

but i don't know how to point a certain button.I've got his id but hawe no idea how to use it here

Link to comment

For starters you should put # before the collection id. I edited your code above to show you how it should look.

Try that first and if it still doesn't work please post a link to your page.

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

Oh, and color will change the text colour on the button. background-color will change the main button colour.

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment
  • 2 months later...

This is a simple Custom CSS solution to adjust the text color, if you have a Button block on a regular page:


.sqs-block-button a {color:#000 !important;}
.sqs-block-button a:hover {color:#fff !important;}

Add Style tags and put it in the Page Header Code Injection to affect only that page:


<style>
.sqs-block-button a {color:#000 !important;}
.sqs-block-button a:hover {color:#fff !important;}
</style>




Link to comment
  • 1 year later...
  • 8 months later...

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

@eleetoburrito

Link to comment
  • 1 month later...

3 days trying to make different product buttons for each page, 3 days with no results.And then, you arrived in my life. :D THANK YOU SO MUCH, I've adapted your code to .sqs-add-to-cart-button-inner and it's been the only thing that worked!!!

THANK YOU

Link to comment
  • 9 months later...

Hey @silvabokis

I've tried your recommendation yet I'm having trouble changing the color on the button :/

I have two buttons on the homepage (Take Action & Grab 'Em).

(Well actually three in total but the third one is actually a donation button.)

For the "Grab 'Em" button I would like to change the color to green. How can I find the proper attribute so I can do it through custom CSS?

Here is the site: stoplitteringtoday.org

Thank you! -Jeff

Creator of ivorycolors.net & stoplitteringtoday.org

Link to comment
  • 8 months later...
  • 8 months later...

Hi everyone, and thank you in advance to anyone who might be able to take this on :)

New to all of this but determined!

I've been racking my brain trying to figure this out. I've somehow managed to get the buttons in the right place, right styling etc, but I can't for the life of me get them to link to the correct pages. I'm working on the HYDE site. bellow is the header injection code I've been working with.The first button needs to go to the shopping-cart page, the second needs to go back to my product page (which is a summary block).


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script>
    $(function() {
      $("<a class='checkoutbutton' href='/link/'>CHECKOUT</a>").insertAfter(".sqs-add-to-cart-button");        
    });
</script>

<script>
  Y.one('a[href="/test/"]').setAttribute('href', 'javascript:history.go(-1)');
</script> 
    <script>
    $(function() {
      $("<a class='checkoutbutton' href='/link/'>BACK</a>").insertAfter(".checkoutbutton");        
    });
</script>


Any help is MUCH appreciated. Both just go to a 404 page at the moment.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.