How to Change Button Color on Hover Using CSS

Every element on a website is considered to be important in terms of user experience. Also, website representation is another kind of factor which has a significant impact on uses. That’s why buttons and other clickable elements should be user friendly and nice looking.

Changing the color of buttons on hover looks quite impressive and feels upmarket rather than single color buttons. Here, we will discuss how to change the background color of the button using simple CSS. We should also choose the color of the button related to our website color. Even more, the color should be material, so it looks elegant to our users.

Change Button Background Color on Hover Using CSS

We have :hover attribute to manage hover events of HTML elements via CSS.

Syntax

.class_name:hover{/* CSS lines */}

Example 1

<!DOCTYPE html>
<html>
<head>
  <title>Change Button Color on Hover Using CSS - errorsea</title>
  <style>
  .myButton{
    padding: 10px 20px;
    background-color: #1E88E5;
    border: 0px;
    color: #fff;
  }
  .myButton:hover{
    background-color: #fff;
    border: 1px solid #1E88E5;
    color: #1E88E5;
  }
  </style>
</head>
<body>
  <button class="myButton">Hover Me</button>
</body>
</html>

We can also add some transition effects to make it more fluid and user friendly.

Read Also: How to Apply Ripple Effect to On Button With CSS

Example 2

In this example, we have added a little transition effect on hover to make the background color changing process more smooth and meaningful.

<!DOCTYPE html>
<html>
<head>
  <title>Change Button Color on Hover Using CSS - errorsea</title>
  <style>
  .myButton{
    padding: 10px 20px;
    background-color: #1E88E5;
    border: 0px;
    color: #fff;
    transition: 0.25s linear;
  }
  .myButton:hover{
    background-color: #fff;
    border: 1px solid #1E88E5;
    color: #1E88E5;
  }
  </style>
</head>
<body>
  <button class="myButton">Hover Me</button>
</body>
</html>

Read Also: Types of Float Property and How to Use Float in CSS

Conclusion

I hope now you have a complete understanding of how to change button color on hover using CSS. It is also quite user-friendly, applying on a hover effect on HTML buttons to change the background.

Enjoy Designing 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Read previous post:
empty field jquery validation
How to Validate Empty Input Fields in a Form Using jQuery

jQuery is the most popular JavaScript framework for client-side validation. Even more, jQuery is famous for its reduced usage. Features...

Close