Pressed Button Effect

Ask the community
,
1

Hi there,

Any possible way to make a button looked “pressed” when clicking on it, using Velo?
Something like this:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_animate3

I know that there is no way to change CSS through Velo (except iFrames), and there is also no access to the “transform” style, which I think activates this effect, through Velo (only these styles are applicable to buttons on Wix from the code).

Thanks a lot!

2

You’ll have to create your own button using custom element + css code.

3

Yes you can take the long and hard way, mentioned by J.D.
Surely it is the better way to go, but looking to the fact to be forced to programm the whole world just to be able to create a little button and be guided by a badly described guide, to create a custom element, perhaps for you it would be the better way to use an html-component.

There you would have just a few simple steps to achieve the same.

  1. Copy the whole shown CODE here…
  1. Add an HTML-Component onto your wished page.

1110×347 20.2 KB

3) Open the HTML-Code-Options & paste the code into it (choose HTML-CODE)

1276×490 37.4 KB

4) Click —> UPDATE and publish your page or go to the preview mode.

  1. Be happy, because it’s done. :grin:

Here an example… https://www.media-junkie.com/html-test

Wanna see whats possible? Take a look here…
https://www.media-junkie.com/html-menu

4

P.S other effects on click could be achieved with Velo (for example changing the button background color for 300ms etc).

  • You maybe able to achieve the transform:-translate effect using wix-animation, but the custom element/iframe is more straight forward,
5

Thanks for the detailed answer!
Is there a way though to apply those styles/attributes to an existing element in my page?
Because I want to be able to connect it to different elements on this page (logic-wise)

Edit: Will might be able to achieve this by using the “postMessage” method from the code. Will update on this

6

@dorhason3 Yes i think it should be possible.
And yes, you will have to use the “postMessage”-command to achieve that.

Use “Fiddle” (google for it) to work better with HTML-Components.

Good luck and happy coding.