Space inside Bootstrap button on hover - css

Question

I have this weird case because my bug displays differently at my website and at JSFiddle. That's why I also put a printscreen to show you how it looks on my website.
Here is the JSFiddle: https://jsfiddle.net/Pysilla/cm8s1d7t/
<section id="fashion" class="img-responsive">
<div class="container">
<div class="row">
<div class="item element col-md-5">
<div class="page-header">
<h2>Fashion<span> photos</span></h2>
</div>
<p>Betiam finibus ac tellus sed ullamcorper. Suspendisse vestibulum mollis feugiat. Fusce vel turpis vitae nulla ullamcorper gravida non vel dolor. Ut rhoncus, metus vitae ultrices varius, ex mauris sodales leo, quis imperdiet turpis ipsum et ante. Phasellus hendrerit rutrum tincidunt. Sed sed viverra ligula, non ullamcorper mauris. Quisque dignissim sollicitudin nulla quis tincidunt. Cras at elementum massa. Cras eget mi hendrerit, congue nunc in, tristique massa. Vivamus at vestibulum ex.</p>
<div class="text-center">
<span>See more</span>
</div>
</div>
</div>
</div>
</section>
(When you change size of screen you could see little stripe on the left inside of the button)
I hope you could see the difference.

Answer 1

You just need to account for the 2px border on .btn-primary. You can use translate(calc(-100% - 2px)); on the hidden state of the pseudo element.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<style>
.btn-primary{
margin-top:1em;
background-color:#3CD3DC;
background-image:none;
border:2px solid #3CD3DC;
display:inline-block;
transition:all 0.3s;
overflow:hidden;
box-shadow:none !important;
position:relative;
}
.btn-primary:hover{
background-color:transparent;
border:2px solid #3CD3DC;
}
.btn-primary:before{
content:"";
position:absolute;
background-color:#1fa5ad;
width:100%;
height:100%;
top:0;
left:0;
transform:translateX(calc(-100% - 2px));
transition: 0.8s;
}
.btn-primary:hover:before{
transform:translateX(0%);
left:0;
}
.btn-primary span{
position:relative;
}
</style>
<section id="fashion" class="img-responsive">
<div class="container">
<div class="row">
<div class="item element col-md-5">
<div class="page-header">
<h2>Fashion<span> photos</span></h2>
</div>
<p>Betiam finibus ac tellus sed ullamcorper. Suspendisse vestibulum mollis feugiat. Fusce vel turpis vitae nulla ullamcorper gravida non vel dolor. Ut rhoncus, metus vitae ultrices varius, ex mauris sodales leo, quis imperdiet turpis ipsum et ante. Phasellus hendrerit rutrum tincidunt. Sed sed viverra ligula, non ullamcorper mauris. Quisque dignissim sollicitudin nulla quis tincidunt. Cras at elementum massa. Cras eget mi hendrerit, congue nunc in, tristique massa. Vivamus at vestibulum ex.</p>
<div class="text-center">
<span>See more</span>
</div>
</div>
</div>
</div>
</section>

Answer 2

Another alternative is to set the button's :before element visibility to "hidden" by default and then "visible" on mouse over.
.btn-primary:before{
content:"";
position:absolute;
background-color:#1fa5ad;
width:100%;
height:100%;
top:0;
left:0;
transform:translateX(-100%);
transition: 0.8s;
visibility: hidden;
}
.btn-primary:hover:before{
transform:translateX(0%);
left:0;
visibility: visible;
}
https://jsfiddle.net/cm8s1d7t/1/