Timothy Fisher Timothy Fisher - 1 year ago 109
HTML Question

CSS - Glitchy border transition



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