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

How do I change styling for only one button?

Question

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/

Edited by acalvo

Share this post


Link to post

19 answers to this question

Recommended Posts

  • 0

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


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 2

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



Edited by silvabokis

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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

Edited by 17pixeli

Share this post


Link to post
  • 0

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.

Edited by silvabokis

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 4

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>




Edited by squareology

Share this post


Link to post
  • 0

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


Freelance graphic design, with a pretty basic understanding of code, but a craving for things to look pretty and work perfectly. This gets me in trouble! Visit my website to get in contact: www.januarymade.co.nz :)

Share this post


Link to post
  • -1

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

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