How do I change styling for only one button?

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/

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

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?

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

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;
}

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

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.

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

i know about the # ;)

this code changes color of both buttonsi need to point one button white and the second one blacki've got their id's but don't know how to type it

page adress http://www.inco-gnito.eu/test/

Use the nth-child() pseudo class to target a specific node. For the page you linked, you would do:

#collection-5513e13de4b05d27e68b6b79 .content .sqs-row>.sqs-col-6:nth-child(1) a.sqs-block-button-element {
   background-color: #ffffff;
   color: #000000;
}

what about a link transformed into a button placed in "page" block ?

I use Adversary templateWhen i put buttons in a "page content" block they show up between pages and not on the center of page

what about a link transformed into a button placed in "page" block ?

I use Adversary templateWhen i put buttons in a "page content" block they show up between pages and not on the center of page

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>

@squareology I have been searching for days for this simple answer, thank you so much!

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

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

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

The code worked which is awesome...thank you but one issue...I cannot figure how to make the button clickable to link it to a file/link once clicked. It is auto-directing to my contact us page.

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.