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