Warning: Cannot modify header information - headers already sent by (output started at /home/jerwon11/divtagtutorials.com/wp-content/plugins/captcha/captcha.php:1) in /home/jerwon11/divtagtutorials.com/wp-content/plugins/wp-super-cache/wp-cache-phase2.php on line 60
How to change Button Color

How to change Button Color

The button for your theme can be customized. This tutorial will show you how.

1) Open the code editor

First click on “design” and then on “edit html/css” to access the code editor. Once you have it open, click on “main_style.css” to open the cs page

2) Locate button css codes

Weebly have two button color: Normal and Highlighted. When you hover your cursor over the button, it will change color as well. So there are 4 color code to customize here.

 

Normal Button

1) Button Background Color

Locate this code in main_style.css

.wsite-button.wsite-button-large.wsite-button-normal,
.wsite-button.wsite-button-small.wsite-button-normal {
color: #fff !important;
display: inline-block;
border: none;
background: #000 !important;
}

Depending on your theme, some coding might look different. The important this here is to recognize this code:

.wsite-button.wsite-button-large.wsite-button-normal,
.wsite-button.wsite-button-small.wsite-button-normal

Here look for the background code as highlighted above. In this example, it is #000 (black). Your theme might have a different color code, so don’t worry about that. The important part here is to locate “background”.

You can change the hex color code to anything color you like. You can find the hex color code here

2) Button Font Color

Locate this code in main_style.css

.wsite-button.wsite-button-large.wsite-button-normal,
.wsite-button.wsite-button-small.wsite-button-normal {
color: #fff !important;
display: inline-block;
border: none;
background: #000 !important;
}

Depending on your theme, some coding might look different. The important this here is to recognize this code:

.wsite-button.wsite-button-large.wsite-button-normal,
.wsite-button.wsite-button-small.wsite-button-normal

Here look for the font color code as highlighted above. In this example, it is #fff (white). Your theme might have a different color code, so don’t worry about that. The important part here is to locate “color”.

You can change the hex color code to anything color you like. You can find the hex color code here

Normal Button Hover

Locate this code in main_style.css

.wsite-button.wsite-button-small.wsite-button-normal:hover,
.wsite-button.wsite-button-large.wsite-button-normal:hover,
.wsite-button.wsite-button-small.wsite-button-normal:hover .wsite-button-inner,
.wsite-button.wsite-button-large.wsite-button-normal:hover .wsite-button-inner {
background: #333 !important;
}

Depending on your theme, some coding might look different. The important this here is to recognize this code:

.wsite-button.wsite-button-small.wsite-button-normal:hover,
.wsite-button.wsite-button-large.wsite-button-normal:hover,
.wsite-button.wsite-button-small.wsite-button-normal:hover .wsite-button-inner,
.wsite-button.wsite-button-large.wsite-button-normal:hover .wsite-button-inner

Here look for the background code as highlighted above. In this example, it is #333 (gray). Your theme might have a different color code, so don’t worry about that. The important part here is to locate “background”.

You can change the hex color code to anything color you like. You can find the hex color code here

 

Highlight Button

1) Button Background Color

Locate this code in main_style.css

.wsite-button.wsite-button-large.wsite-button-highlight,
.wsite-button.wsite-button-small.wsite-button-highlight {
color: #fff !important;
display: inline-block;
border: none;
background: #47acad !important;
border: 1px solid #a3c3c3 !important;
}

Depending on your theme, some coding might look different. The important this here is to recognize this code:

.wsite-button.wsite-button-large.wsite-button-highlight,
.wsite-button.wsite-button-small.wsite-button-highlight

Here look for the background code as highlighted above. In this example, it is #47acad (teal). Your theme might have a different color code, so don’t worry about that. The important part here is to locate “background”.

You can change the hex color code to anything color you like. You can find the hex color code here

2) Button Font Color

Locate this code in main_style.css

.wsite-button.wsite-button-large.wsite-button-highlight,
.wsite-button.wsite-button-small.wsite-button-highlight {
color: #fff !important;
display: inline-block;
border: none;
background: #47acad !important;
border: 1px solid #a3c3c3 !important;
}

Depending on your theme, some coding might look different. The important this here is to recognize this code:

.wsite-button.wsite-button-large.wsite-button-highlight,
.wsite-button.wsite-button-small.wsite-button-highlight

Here look for the font color code as highlighted above. In this example, it is #fff (white). Your theme might have a different color code, so don’t worry about that. The important part here is to locate “color”.

You can change the hex color code to anything color you like. You can find the hex color code here

 

Highlight Button Hover

Locate this code in main_style.css

.wsite-button.wsite-button-small.wsite-button-highlight:hover,
.wsite-button.wsite-button-large.wsite-button-highlight:hover,
.wsite-button.wsite-button-small.wsite-button-highlight:hover .wsite-button-inner,
.wsite-button.wsite-button-large.wsite-button-highlight:hover .wsite-button-inner {
background: #eee !important;
color: #333 !important;
}

Depending on your theme, some coding might look different. The important this here is to recognize this code:

.wsite-button.wsite-button-small.wsite-button-highlight:hover,
.wsite-button.wsite-button-large.wsite-button-highlight:hover,
.wsite-button.wsite-button-small.wsite-button-highlight:hover .wsite-button-inner,
.wsite-button.wsite-button-large.wsite-button-highlight:hover .wsite-button-inner

Here look for the background code as highlighted above. In this example, it is #eee (light gray). Your theme might have a different color code, so don’t worry about that. The important part here is to locate “background”.

You can change the hex color code to anything color you like. You can find the hex color code here

3) Save & Publish

Once you have the color set, you can save & publish your site for the change to take effect.

Tags: , , , , , , ,