How to animate background-color of an element on mouse hover using CSS

Topic: HTML / CSS« Prev|Next »

Answer: Use the CSS3 transition property

You can use the CSS3 transition property to smoothly animate the background-color of an element on mouseover, such as a hyperlink or a button.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>CSS Smooth Background Color Transition</title>
  • <style type="text/css">
  •     a {
  •         color: #fff;
  •         border: none;
  •         padding: 10px 20px;
  •         display: inline-block;
  •         text-decoration: none;
  •         font: bold 18px sans-serif;
  •         background: #fd7c2a;
  •         -webkit-transition: background 2s; /* For Safari 3.0 to 6.0 */
  •         transition: background 2s; /* For modern browsers */
  •     }
  •     a:hover {
  •         background: #3cc16e;
  •     }
  • </style>
  • </head>
  • <body>
  •     <p><a href="#">Hover on me</a></p>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.