Hi all,
I would like to know if is possible to zoom/scale a button on hover.
In the interaction I can enable Tilt Effect, but I would like to use the scale effect on over the button.
Someone could you help me?
Thank you in advance,
P.
P.S. I can't share the link, the site is in local.
I solved it like this:
.sppb-button-wrapper
{
display: block;
background: transparent;
transition: .3s ease-in-out 0s;
}
.sppb-button-wrapper:hover
{
cursor: pointer;
transform: scale(0.95);
}
:-)Yes, it will work,
you should also add: .sppb-button-wrapper:focus, before :hover line.
Thank you Paul,
I tried, but it works in this version:
.sppb-button-wrapper
{
display: block;
background: transparent;
transition: .3s ease-in-out 0s;
}
.sppb-button-wrapper:hover
{
cursor: pointer;
transform: scale(0.95);
}
And it doesn't work in this version:.sppb-button-wrapper
{
display: block;
background: transparent;
transition: .3s ease-in-out 0s;
}
.sppb-button-wrapper:focus
.sppb-button-wrapper:hover
{
cursor: pointer;
transform: scale(0.95);
}
Where I'm wrong?"," is missing (!) between class names - look how should be
.sppb-button-wrapper:focus, .sppb-button-wrapper:hover
Is this the correct version?
.sppb-button-wrapper
{ display: block;
background: transparent;
transition: .3s ease-in-out 0s; }
.sppb-button-wrapper:focus,
.sppb-button-wrapper:hover
{ cursor: pointer;
transform: scale(0.95); }
if so, it's not working for me. However, with the first code I used it works...
Use what works for you. This is probably the simplest answer :O)
Sometimes problem is with Cache (Joomla/Browser), becuase CSS seems to be OK. But am not here to validate CSS for obvious reasons.