CSS button hover with border, change the border colour

CSS button hover, The Requirements

  1. Show a border on the button when hovering
  2. 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.


Posted

in

, ,

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.