I have a problem, I have researched and read that css still doesn't support transition in css... So I have a button with only a gradient border and I want the button to be completely filled with that gradient when hovering... Is there an alternative way to create it? Here is the code I have...
.servicios_btn{
display: block;
width: 200px;
height: 40px;
text-align: center;
margin-top: 45px;
border-radius: 100px;
border: solid 3px transparent;
background-image:linear-gradient(#ffffff, #ffffff), linear-gradient(78deg, #102397 , #00EAF8);
background-position: 0 100%;
transition: background-position 0.5s;
/*background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(to right, #00c6ff, #53a0fd 48%, #0072ff);*/
background-origin: border-box;
background-clip: content-box, border-box;
}
.servicios_btn a{
display: block;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 24px;
color: #0b457f;
margin-top: 7px;
}
.servicios_btn:hover{
background-position: 0 0;
}
.servicios_btn:hover a{
color:white;
}
<div class="servicios_btn">
<a href="#">Servicios</a>
</div>
A good alternative would be what Hugo Quiñónez suggests in his answer : that it be the element
<a>
that has a white background and that it disappears by changing it to transparent. As an alternative to your alternative, you could usebox-shadow
in<a>
for that. Something like this:Why do I suggest
box-shadow
? Because it is an animatable property (to which animations/transitions can be applied) that will give you more play than the simple background color: you will not only be able to control the color, but also the direction or the blur that you want to apply To the change. Which can give more play when creating an animated button.Here you can see some examples:
It occurs to me to make the color transparent
<a>
and add a fadein, I don't know if it works for you.I hope it helps you
This solution occupies a pseudo element positioned after the div using
.servicios_btn:after
. It has the color you want the container to be when hovered over and relative positioning to align with it. Its initial opacity is zero, but on hover (.servicios_btn:hover:after
) the opacity transitions to 1.The idea of transitions (and thus a background-image cannot be transitioned) is that the browser can interpolate between the two states. An image is not tweenable, even if it is a gradient defined by hex colors that are themselves tweenable.
The link inside the container also has
position:relative
because I need to make sure it has a z-index such that it stays above the pseudo element.I put this solution at the suggestion of Álvaro Montoro , although in reality it may be overcomplicating life due to the work involved in perfectly aligning the pseudo-element.