How to change the color of a button: full instruction for beginners

We will change the background and text color of a button on hover.

We will use two methods. The first method is to change button’s background and color. The second is to change button’s background with the :before pseudo element

Button inside the form (button type=”submit”)

Just change the background and color:

See the Pen #1 Just change the background and color — button type="submit" by kirill (@kirivaha) on CodePen.

Change it with the :before pseudo element (note the span you want to put inside the button):

See the Pen Change the background with :before — button type="submit" by kirill (@kirivaha) on CodePen.

Button inside the form (input type=”submit”):

The same principle as above, but instead of button[type=”submit”] you need to put input[type=”submit”] in CSS

Button as a separate element in the html code:

Just change the background and color:

See the Pen Change the color of the button — regular div by kirill (@kirivaha) on CodePen.

And now we change the color with the :before pseudo element

See the Pen Change the color of the button with :before — regular div by kirill (@kirivaha) on CodePen.

Button in Bootstrap

You need to find the right class (or id), as well as the right nesting order of elements to change the button color in Bootstrap.

For example, you have the button

<button type="button" class="btn btn-outline-primary">Primary</button>

And you want to change its color on hover. Then I would recommend you to write the following in CSS:

.btn.btn-outline-primary:hover {
  background: red; /* Or any other color */
  /* I would also change the color for the border */
}

How to change button color using JS

I’ll show you two ways to change a button color on hover using JavaScript.

First way – we will add a class from our button via JS:

See the Pen Change the color of the button using JS — by adding a new class by kirill (@kirivaha) on CodePen.

Second way – we will change the css styles directly in the JS:

See the Pen Untitled by kirill (@kirivaha) on CodePen.

Hope I helped you to understand how you can change a button color when the cursor is pointing at it. In conclusion, I recommend you to watch the video and finally clear up all the questions.