Timothy Fisher Timothy Fisher - 2 years ago 134
HTML Question

CSS - Glitchy border transition

Fiddle:

https://jsfiddle.net/9poh0y28/1/

button.products:hover {
background-color: #fff;
color: #303030;
cursor: pointer;
border: 4px solid #0085ca;
}


For some reason in Chrome there is this weird jump when the border is added. It gets added, and then gets slightly bigger a split second afterwards. Any way to fix this?

Answer Source

Change your transitions from all to background-color:

-webkit-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;

When you use all, all of your properties get the transitions. So your border goes from 1px to 4px, thus the weird effect.

Here's your fiddle changed

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download