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

🗓️ Updated: 08.08.2022
💬Comments: 0
👁️Views: 968

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.

Was the article helpful?
👍
Yes - 4
👎
Not - 0
💬Comments:

CSS Головоломки в Telegram
Subscribe and don't miss:
Actual news
Interesting puzzles
Useful links
Our rating
🏆The best website hosting
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
How to make a burger menu – complete code and detailed explanation
Views: 18285
Appearance of elements on scrolling
Views: 16841
How to center an image with CSS
Views: 6955
How to make a smooth zoom of the image on hover – effect on pure CSS
Views: 6791
How to make a button click effect in CSS
Views: 6210
Check of knowledge
🤔How well do you know CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Color of 2022
The Pantone Color Institute has announced the color of the year 2022. It's a shade of lilac lilac shade called 17-3938 Very Peri.
#6667ab