C.Ronaldo C.Ronaldo - 3 months ago 8
CSS Question

Border around button shows a bit of the background-color

I have a button that will show a grey border around it when it's getting hovered over. (I add

.hovered
when hovered over)

When I do this, the border still shows a bit of the background-color in the corners.

enter image description here

I'm not sure what the cause for this is.

My code:

> span.button
{
margin-left: auto;
margin-right: auto;

@media (min-width: $screen-xs-min) and (max-width: $screen-sm-min - 1)
{
bottom: 70px;
}

@media (min-width: $screen-sm-min)
{
bottom:55px;
}

> a
{
padding: 6px 25px 6px 25px;

background: rgba(196,18,21,1);
background: -moz-linear-gradient(top, rgba(196,18,21,1) 0%, rgba(194,4,7,1) 0%, rgba(223,21,28,1) 0%, rgba(192,4,7,1) 0%, rgba(223,21,28,1) 0%, rgba(223,21,28,1) 50%, rgba(194,4,6,1) 51%, rgba(194,4,6,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(196,18,21,1)), color-stop(0%, rgba(194,4,7,1)), color-stop(0%, rgba(223,21,28,1)), color-stop(0%, rgba(192,4,7,1)), color-stop(0%, rgba(223,21,28,1)), color-stop(50%, rgba(223,21,28,1)), color-stop(51%, rgba(194,4,6,1)), color-stop(100%, rgba(194,4,6,1)));
background: -webkit-linear-gradient(top, rgba(196,18,21,1) 0%, rgba(194,4,7,1) 0%, rgba(223,21,28,1) 0%, rgba(192,4,7,1) 0%, rgba(223,21,28,1) 0%, rgba(223,21,28,1) 50%, rgba(194,4,6,1) 51%, rgba(194,4,6,1) 100%);
background: -o-linear-gradient(top, rgba(196,18,21,1) 0%, rgba(194,4,7,1) 0%, rgba(223,21,28,1) 0%, rgba(192,4,7,1) 0%, rgba(223,21,28,1) 0%, rgba(223,21,28,1) 50%, rgba(194,4,6,1) 51%, rgba(194,4,6,1) 100%);
background: -ms-linear-gradient(top, rgba(196,18,21,1) 0%, rgba(194,4,7,1) 0%, rgba(223,21,28,1) 0%, rgba(192,4,7,1) 0%, rgba(223,21,28,1) 0%, rgba(223,21,28,1) 50%, rgba(194,4,6,1) 51%, rgba(194,4,6,1) 100%);
background: linear-gradient(to bottom, rgba(196,18,21,1) 0%, rgba(194,4,7,1) 0%, rgba(223,21,28,1) 0%, rgba(192,4,7,1) 0%, rgba(223,21,28,1) 0%, rgba(223,21,28,1) 50%, rgba(194,4,6,1) 51%, rgba(194,4,6,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c41215', endColorstr='#c20406', GradientType=0 );

border-radius: 10px;

color: #ffffff;
}
}


Hovered:

&.hovered > span.button a
{
border: 4px solid #e3e3e3;
}


Demo (without hover function, not important for this problem):

https://jsfiddle.net/zfmjL9gr/

Answer

This appears to be standard anti-aliasing due to pixel rounding as a result of the border-radius

Backgrounds extend to and are under the borders. You usually can't see them because the border color obscures it.

However, you can stop the background from being visible under the border by first adding a default transparent border (so the button doesn't change size) and applying background-clip:padding-box to the anchor.

Background-clip @ MDN and has excellent support.

body {
  padding: 3em;
}
a {
  padding: 6px 25px 6px 25px;
  text-decoration: none;
  background: rgba(196, 18, 21, 1);
  background: linear-gradient(to bottom, rgba(196, 18, 21, 1) 0%, rgba(194, 4, 7, 1) 0%, rgba(223, 21, 28, 1) 0%, rgba(192, 4, 7, 1) 0%, rgba(223, 21, 28, 1) 0%, rgba(223, 21, 28, 1) 50%, rgba(194, 4, 6, 1) 51%, rgba(194, 4, 6, 1) 100%);
  border-radius: 10px;
  color: #ffffff;
  /* added */
  border: 4px solid transparent;
  background-clip: padding-box;
}
span.button:hover a {
  border: 4px solid #e3e3e3;
}
<span class="button"><a href="#1">Button</a></span>

Comments