Looking for something specific?
This is the more refined version of the basic rectangular button. The background color still changes on hover, but now it does so smoothly—giving the button (and your site) a more responsive, polished feel.
It’s all thanks to a single rule:
transition: background-color 200ms linear;
This tells the browser to animate any change in background color. Including it in both the base and hover states ensures a smooth transition in both directions.
Copy to clipboard<a href='#'><div id='button-example-1604'>Click here!</div></a>
Copy to clipboard#button-example-1604 {
color: #fffff7; background-color: #A37C40; padding: 20px 40px; font-size: 18px; font-weight: 600; width: 200px; text-align: center; transition: background-color 200ms linear;
}#button-example-1604:hover {
background-color: #2B1412; transition: background-color 200ms linear;
}
