CSS button hover, The Requirements
- Show a border on the button when hovering
- Be semantically correct
A while ago I needed to create a CSS button with a border on hover. I came up with the most complicated way of doing this, adding and removing padding to compensate for the border width, this was terrible and would cause issues with some browsers. Instead, it’s better to assign a border of the same color as the button, then change the colour. It’s really that easy! Check out the code for this CSS button hover effect.
The CSS
.custom-hover-border {
background:red;
color:#fff;
border:6px solid red;
}
.custom-hover-border:hover {
border-color:pink;
}
The HTML
<code><button class="custom-hover-border">Try Me!</button></code>
Why not use padding?
Different browsers handle padding differently in this situation. When an inline element like a button changes size between hover and non-hover states, even though the transition is fast there is often skipping. Not to mention the difficulties in transitioning this for touch devices.
W3schools has more examples of bordered buttons you should definitely check out as well as many other types of buttons.
Leave a Reply