Change Background Color

How To: Change Background Color

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

There are different backgrounds you could change through out your website. You can change the background color of the entire website, or on a specific part of your website.

 

This example:

<body bgcolor=”#E6E6FA”>

Changes the background of the entire website.

 

Whereas this example:

.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */

 

By adding that code to the <style> you will make the button change to the specific color. Just make sure to give the button you wish to change the proper class, here is the example:

 

<button class=”button”>Green</button>
<button class=”button button2″>Blue</button>
<button class=”button button3″>Red</button>
<button class=”button button4″>Gray</button>
<button class=”button button5″>Black</button>