Blog

How to change background color on button hover using CSS

  • Post category:CSS

Do you know How to change background color on button hover using CSS?

Get the code of How to change background color on button hover using CSS and watch video tutorials. You can practice using our code editor. Our practical guide will make your learning journey much easier. You can explore the tutorial and learn.

<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
button {
  background: red;
  color: white;
  border: none;
  padding: 15px 60px;
  cursor: pointer;
  border-radius: 5px;
  border: 5px solid yellow;
}
#btn2 {
  background: green;
}
#btn2:hover {
  background: black;
}
#btn1:hover {
  background: blue;
}
Try it Yourself

Take your coding skills to the next level with this tutorial.: How to Make Buttons to Smart Button in Shopify ? Shows Colourful Bubbles on Hover.