Moving CSS from side to button
I am working on a button that changes the background color and CSS color properties on hover. Basic things.
<span>Contact me</span>
.contact-right span{
background-color: #fff;
color: #f87f73;
padding: 0px 25px;
border: 5px solid #f87f73;
}
.contact-right span:hover{
background-color: #f87f73;
color: #fff;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
This effect doesn't work, and I see the transition effect smoothly, and the background color and color change smoothly. But I needed a certain thing, according to which the transition occurs from left to right from the button. What I mean is that the transition shouldn't just affect the entire button at once, it should slide from the left and change the background color and text color from left to right.
How to do it? Could this be accomplished with CSS or would I have to use JQuery somehow?
source to share
You should try to play: before and: after pseudo-elements, as shown in this survey article :
.contact-right {
position: relative;
background-color: #fff;
color: #f87f73;
padding: 5px 25px;
border: 5px solid #f87f73;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
cursor: pointer;
}
.contact-right:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #f87f73;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
.contact-right:hover {
color: #fff;
}
.contact-right:hover:before {
width: 100%;
color: #fff;
}
source to share
Hope this is how you want it.
.contact-right span{
background-color: #fff;
color: #f87f73;
padding: 0px 25px;
border: 5px solid #f87f73;
display: block;
background-image: linear-gradient(to left,
transparent,
transparent 50%,
#00c6ff 50%,
#00c6ff);
background-position: 100% 0;
background-size: 200% 100%;
transition: all .25s ease-in;
}
.contact-right span:hover{
background-position: 0 0;
background-color: #f87f73;
color: #fff;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
source to share
You can use pseudo-elements to achieve this effect
span{
background-color: #fff;
color: #f87f73;
padding: 0px 25px;
border: 5px solid #f87f73;
position:relative;
}
span:hover:before {
content: attr(data-text);
background: #f87f73;
color: #fff;
width: 130px;
visibility: visible;
opacity:1;
}
span:before {
content: '';
display:block;
position: absolute;
padding: 0px 25px;
box-sizing: border-box;
width: 1%;
height: 100%;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
visibility: hidden;
opacity:0;
}
<span data-text="Contact me">Contact me</span>
source to share