removing one pixel "border-radius" from button link - html

Question

I have a problem when I try to use overflow: hidden; to hide a background effect on a button. I see one pixel around of border-radius in Chrome:
What can I do to hide these pixels? I can try to use box-shadow, but maybe you know an easier way.
JsFiddle
test
Css:
.btn {
margin: 20px;
padding: 10px 30px;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border: 2px solid #f0913a;
-webkit-border-radius: 20px;
border-radius: 20px;
cursor: pointer;
overflow: hidden; /* <-- I try hide background but always get http://screencast.com/t/qktgZwmVtH */
}
.hvr-shutter-in-horizontal {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
background: #181818;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
.hvr-shutter-in-horizontal:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #f0913a;
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-shutter-in-horizontal:active:before,
.hvr-shutter-in-horizontal:focus:before,
.hvr-shutter-in-horizontal:hover:before {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}

Answer 1

you may use an inset shadow:
.btn {
margin: 20px;
padding: 10px 30px;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border: 2px solid #f0913a;
border-radius: 20px;
cursor: pointer;
overflow:hidden;
}
.hvr-shutter-in-horizontal {
display: inline-block;
vertical-align: middle;
}
.hvr-shutter-in-horizontal:before {
content: "";
position: absolute;
z-index: -1;
top: -50px;
bottom: -50px;
left: 0px;
right: 0px;
background: #f0913a;
transition: 0.5s;
border-radius: inherit;
box-shadow: inset 0 0 0 0 #181818;
}
.hvr-shutter-in-horizontal:active:before,
.hvr-shutter-in-horizontal:focus:before,
.hvr-shutter-in-horizontal:hover:before {
box-shadow: inset 0 0 0 150px #181818;
}
test
it doesn't eradicate the bug , but the black is not there bleeding anymore.
to avoid the bug, Use another method, you may use a background-image such as a css gradient and resize it on hover (no pseudo involved either). example:
.btn {
margin: 20px;
padding: 10px 30px;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border: 2px solid #f0913a;
-webkit-border-radius: 20px;
border-radius: 20px;
cursor: pointer;
overflow: hidden;
background: linear-gradient(black, black) left no-repeat, linear-gradient(black, black) right no-repeat #f0913a;
background-size: 0 100%;
transition: background-size 0.3s;
}
.hvr-shutter-in-horizontal {
display: inline-block;
vertical-align: middle;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
}
.hvr-shutter-in-horizontal:active,
.hvr-shutter-in-horizontal:focus,
.hvr-shutter-in-horizontal:hover {
background-size: 100% 100%;
}
test

Answer 2

you just need to add background-clip:padding-box; on class .hvr-shutter-in-horizontal
CSS:
.btn {
margin: 20px;
padding: 10px 30px;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border: 2px solid #f0913a;
-webkit-border-radius: 20px;
border-radius: 20px;
cursor: pointer;
overflow: hidden;
}
.hvr-shutter-in-horizontal {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
background: #181818;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: .3s;
transition-duration: .3s;
/* Prevent background color leak outs */
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.hvr-shutter-in-horizontal:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #f0913a;
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-shutter-in-horizontal:active:before,
.hvr-shutter-in-horizontal:focus:before,
.hvr-shutter-in-horizontal:hover:before {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
Demo on jsfiddle: https://jsfiddle.net/hamzanisar/wd9exfmx/9/

Answer 3

remove the overflow:hidden from the .btn class and change the left, right properties for the :before element, also set the border-radius to inherit for the :before element check the fiddle here for eg https://jsfiddle.net/0ap4qbrn/
.btn {
margin: 20px;
padding: 10px 30px;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border: 2px solid #f0913a;
-webkit-border-radius: 20px;
border-radius: 20px;
cursor: pointer;
}
.hvr-shutter-in-horizontal {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
background: #181818;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
.hvr-shutter-in-horizontal:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: -2px;/*equal to the border width of .btn but negated*/
right: -2px;/*equal to the border width of .btn but negated*/
background: #f0913a;
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
border-radius: inherit;
}
.hvr-shutter-in-horizontal:active:before,
.hvr-shutter-in-horizontal:focus:before,
.hvr-shutter-in-horizontal:hover:before {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}

Answer 4

give box-sizing:border-box; with webkit and moz prefix this may solve your issue