BRINE: Change Donate Button Style

Site URL: https://rafida.org

Hey,

In the attached image you can see the button that says 'CARD'. This is the inbuilt 'donate' function on Squarespace.

Is there any way to control the style of the button? We want it to look like the other buttons on the right and left of it.

I could not find any non-code way to adapt the style through Squarespace.

Thanks

Website access:
rafida.org
pass: lastphasetesting3

Add the following to Page Settings > Advanced > PAGE HEADER CODE INJECTION for the page.

<style>

  body:not(.button-style-default).button-style-outline .sqs-editable-button {
  
    background-color: #e37262;
    
    -webkit-box-shadow: 0 2px 0 0 #dd5340;
    box-shadow: 0 2px 0 0 #dd5340;
    
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    
    }
    
  body:not(.button-style-default).button-style-outline .sqs-editable-button:hover {
  
    background-color: #e67e70;
    
    }
        
  </style>

This is for a v7.0 site using the Brine template.

If you're not on the business plan or above then add it to Design > Custom CSS, sans the style tag.

Let us know how it goes.

Brilliant! Works perfectly

Thanks for being so helpful

Hey,

I am having a similiar problem, but the code you provived does not seem to work in my case (Version 7.1). 

As you can see the brown button is not very readable on the page, so I want my donation button on this site (https://www.humanaid.io/saveafghanistan)  to look like the button on our homepage header (https://www.humanaid.io/). 

Thanks!

@Drizzy

Try changing the color for the first page section of the Save Afghanistan page from Darkest 1 to Dark 1.

Let us know how it goes.

I am also looking to make my donate button match the other buttons! I tried messing with the code @creedon provided for OP, but was unsuccessful.

Buttons I like are on the homepage: http://amepstein.com and buttons I want to be bigger / look like those are at http://amepstein.com/gifts

Or even better yet--is there a way to put the donate button link / code in a regular button or image so I can make them more like cards?

TIA! 

@ameliastier

The reason the code didn't work it that it is for a v7.0 site. Your site is v7.1.

Here is something you can try. Add the following to Design > Custom CSS.

.donation-block .sqs-donate-button-wrapper {

  transform : scale( 1.5 );

  }

This is for v7.1.

You can play with the 1.5 value.

Let us know how it goes.

Hi, 

I'm looking to change the opacity to solid and adjust the hover color on the donate button. I have tried switching the section color background, but it's not giving me what I want. I'm in 7.1 and the link to the page is:

https://www.artonthegrid.com/rsvp-april-art-critique

Thank you, any help or feedback is appreciated!

32 minutes ago, loren1 said:

I'm looking to change the opacity to solid and adjust the hover color on the donate button.

Add the following to Design > Custom CSS.

/* begin alter donate button */

  body:not( .button-style-default ).primary-button-style-solid .site-wrapper:not( .with-button-variants ) #block-yui_3_17_2_1_1648508980957_2756 .sqs-editable-button:hover {
  
    opacity : unset;
    
    }
    
  .primary-button-style-solid .dark-bold #block-yui_3_17_2_1_1648508980957_2756 .sqs-button-element--primary:hover {
  
    background-color : red;
    color : green;
    
    }
    
  /* begin alter donate button */

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

It works perfectly! Thank you so much for the super-quick response @creedon!