Every element on a website is considered to be important in terms of user experience. In addition, website representation is also 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. So here, we are going to 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.
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>
Enjoy Designing 
The post How to Change Button Color on Hover Using CSS appeared first on errorsea.
Top comments (0)