How to Change the Color of the Weebly Website Button

The Weebly template that I am using is Unite.   One of the features of this theme are that there are only 2 choices of colors for buttons - grey and black, which does not make the call to action very visible.

Prompted by Neil Patel's recent post "How to Create the Perfect Call to Action" I utilised one of the best features of free Weebly websites the ability to add custom HTML / CSS to the website to change the Donate buttons from Black to Yellow!

​ Here's how to change the color of your buttons:

Step 1: Go to Themes 
​
​Step 2: Click on Edit HTML / CSS at the bottom of the page

Step 3: Search for Styles, and main.less.  If your theme does not have a main.less file, you might want to try UI-kits.less. I haven't tried looking through every single theme for where the button sits, but look in the Styles folder, and check each one by searching for Button. 

Step 4. Use the Search function and search for "Button" or scroll down till you see /* Button */. That's where all the button styling sits.
​
​Step 4: Change the background from black (#000000) to yellow (#fbb730). Change the border color to whatever color you want your border to be. I like my buttons borderless so I use the same yellow (#fbb730)

Step 5: Change the color (font color) from white (#ffffff) to black (#000000)

Step 6: To change the color of the button when you hover over it, look for the word button and hover (.wsite-button:hover or .wsitebutton-highlight:hover) and change the colour there!

Button Styling CSS

Code Editor

Button Hover CSS

Coincidence? Maybe.  Correlation does not mean causation.

But whether it was the change in colour of CTA or not,  learning from @neilpatel and @shayhowe led to a jump in the number of donations and  my projected completion date has been brought forward by 5 days!  

Good thing I learnt some HTML / CSS from Shay Howe earlier this year (one of the best sites to learn)
​

Only $325 left to go!