How To Zoom/scale A Button On Hover - Question | JoomShaper
Back to the questions

How To Zoom/scale A Button On Hover

P

P.C.

SP Page Builder 1 year ago

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.

0
6 Answers
Order by
Oldest Newest Votes
P
P.C.
Accepted Answer
1 year ago #151070

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); }

        :-)
0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #151072

Yes, it will work,

you should also add: .sppb-button-wrapper:focus, before :hover line.

0
P
P.C.
Accepted Answer
1 year ago #151076

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?
0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #151135

"," is missing (!) between class names - look how should be

.sppb-button-wrapper:focus, .sppb-button-wrapper:hover

0
P
P.C.
Accepted Answer
1 year ago #151139

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...

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #151177

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.

0