How to change button hover color in CSS?
How to change button hover color in CSS?
2 answers
by
Ekaterina_90 ,
2 years ago
@daisha.padberg Use the :hover selector to change the style of the button when you move the mouse over it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> button { background-color: blue; color: azure; } button:hover { background-color: brown; } </style> </head> <body> <button type="button">Click Me!</button> </body> </html> |
by
cruz.howell ,
10 months ago
@daisha.padberg
To change the button hover color in CSS, you can use the ":hover" pseudo-class. Here's an example:
HTML:
1
|
<button class="my-button">Click me!</button> |
CSS:
1 2 3 4 5 6 7 8 9 10 |
.my-button {
background-color: blue;
color: white;
border: none;
padding: 10px 20px;
}
.my-button:hover {
background-color: red;
}
|
In this example, the button initially has a blue background color, and when you hover over it, the background color changes to red. You can change the background color, text color, border, and other properties using CSS.
15