How to match a hover button effect using css animations? - css

Question

Im trying to replicate a button hover effect into a preloader.
With the button on hover the blue goes from left to right and then when you come off the white comes in from the left and finish on the right.
That's ideally what I'm trying to replicate, see the codepen link below:
Button Codepen
/* HTML */
<span class="text">View Our Projects</span>
/* CSS */
.btnslide {
font-family:'futura-pt';
font-size:14px;
background-color:#fff;
color:#2A4173;
border:2px solid #2A4173;
display:inline-block;
padding:10px 45px;
text-decoration:none;
text-align:center;
position:relative;
margin-bottom:1em;
outline:none;
-webkit-appearance:none;
border-radius:0
}
.btnslide img {
max-height:10px;
margin-left:5px
}
.btnslide img.white {
display:none
}
.btnslide:hover img.blue {
display:none
}
.btnslide:hover img.white {
display:inline-block
}
.btnslide:before {
background-color:#2A4173;
content:"";
color:#fff!important;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
-webkit-transform:scaleX(0);
-ms-transform:scaleX(0);
transform:scaleX(0);
-webkit-transform-origin:right;
-ms-transform-origin:right;
transform-origin:right;
-webkit-transition:-webkit-transform .4s cubic-bezier(.19,1,.22,1);
transition:-webkit-transform .4s cubic-bezier(.19,1,.22,1);
-o-transition:transform .4s cubic-bezier(.19,1,.22,1);
transition:transform .4s cubic-bezier(.19,1,.22,1);
transition:transform .4s cubic-bezier(.19,1,.22,1),-webkit-transform .4s cubic-bezier(.19,1,.22,1);
will-change:transform
}
.btnslide:hover:before {
-webkit-transform:scaleX(1);
-ms-transform:scaleX(1);
transform:scaleX(1);
-webkit-transform-origin:left;
-ms-transform-origin:left;
transform-origin:left
}
.btnslide:hover span.text {
color:#fff
}
.btnslide span.text {
-webkit-transition:color .4s cubic-bezier(.19,1,.22,1);
-o-transition:color .4s cubic-bezier(.19,1,.22,1);
transition:color .4s cubic-bezier(.19,1,.22,1);
position:relative;
z-index:2
}
.btnslide span.text span.plus {
font-size:25px;
line-height:0;
position:relative;
top:3px
}
Ive almost got it working the blue comes in and then the white comes in but then it shows white coming in a bit from the right which i'm trying to stop.
Preloader Codepen
/* HTML */
<span class="text">View Our Projects</span>
/* CSS */
* {
margin: 0;
padding: 0;
}
.btnslide {
width: 100%;
font-size: 14px;
background-color: #fff;
color: #2A4173;
display: inline-block;
text-align: center;
position: fixed;
outline: none;
-webkit-appearance: none;
border-radius: 0;
top: 0;
left: 0;
height: 100vh;
}
.btnslide span.text {
-webkit-transition: color 0.4s cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: color 0.4s cubic-bezier(0.19, 1, 0.22, 1);
transition: color 0.4s cubic-bezier(0.19, 1, 0.22, 1);
position: relative;
z-index: 2;
top: 50%;
transform: translateY(-50%);
display: block;
}
.btnslide span.text img {
max-height: 150px;
}
.btnslide:before {
background-color: #2A4173;
content: "";
color: #fff !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: right;
-ms-transform-origin: right;
transform-origin: right;
-webkit-transition: -webkit-transform 5s cubic-bezier(0.19, 1, 0.22, 1);
transition: -webkit-transform 5s cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: transform 5s cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 5s cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 5s cubic-bezier(0.19, 1, 0.22, 1);
will-change: transform;
-webkit-animation: fontbulger 5s infinite;
/* Safari 4+ */
-moz-animation: fontbulger 5s infinite;
/* Fx 5+ */
-o-animation: fontbulger 5s infinite;
/* Opera 12+ */
animation: fontbulger 5s infinite;
}
#keyframes fontbulger {
0% {
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
}
30% {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
}
60% {
-webkit-transform-origin: right;
-ms-transform-origin: right;
transform-origin: right;
top: 0;
right: 0;
left: unset;
}
100% {
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: right;
-ms-transform-origin: right;
transform-origin: right;
top: 0;
right: 0;
left: unset;
}
}
.btnslide:hover:before {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
}
Im not sure if there is a more simple way to achieve this, but I would really appreciate any help that anyone has to offer.
Thanks Again