Animation/effect on button click

Ask us anything How do I?
1

Has anyone found a good way to add effects to button clicks, i.e. ripple effect in material design? Currently, buttons in WeWeb don’t seem to do anything visually when clicked - need some friendly user acknowledgement that the click happened.

I tried to create a custom state, thinking I could use the :active property somehow, but not sure how to reference the button element in javascript to check whether it is active/clicked.

I suppose I could add a clicked workflow and perform some kind of custom javascript/css animation but was trying to avoid that.

2

What kind of animation do you want?

3

A brief background color change, or a brief button scaling smaller then larger again. Or the material design ripple effect. Doesn’t need to be fancy, just something to give the user some visual feedback.

4

Cool, I’ll record an alternative, without having to use code

5

This is a way to use it in just one element, if you want to use it in several buttons on the same page, just create an object type variable and pass the information through it, if you want, I can record how to use it that way

6

You can create an Hover state for your main object,
Screenshot 2023-07-04 at 15.31.26

To effect its children (objects within that object) select the tick below.
Screenshot 2023-07-04 at 15.31.53

To edit a specific child within that object ie animation etc. select that and choose below item in the state dropdown
Screenshot 2023-07-04 at 15.32.05

This is to add hover effect to anything inside your main object…

For particular animation to a single object, add a transition to your object… this means in any state change this transition timer will work… so if you add hover to your object, transition timer will be used to move object from one background color to another…

Screenshot 2023-07-04 at 15.34.41

7

Great, thanks. If I created this for a button then made it a reusable component, would the action and animation carry for each new custom button placed on the page? This solution will work but it would be a pain to repeat for every single button if it had to be done manually.

8

They just released classes but not sure what it covers… may worth a try…

But probably easier solution may be… you can create a shared section of common elements that you connect to all pages. and use the button by copying from that section… then delete the section when you are done… Not ideal but can do the job by eliminating tedious do it from scratch…

9

That way I recorded when you clicked on a button the animation would trigger on all of them, I’m going to record a video as I do when there are several buttons on the page
That way I recorded when you clicked on a button the animation would trigger on all of them, I’m going to record a video as I do when there are several buttons on the page
That way you can save it as a component and just make a small change, using it as many times as you want.

10

Would that be your question?

11

A lighter alternative, without use of workflows and variables, is to use the standard :active pseudo-class supported by every browser. You need just a bit of css but you gain in performance because you skip all the workflow dance.

Just add a class (html class, not weweb class) to your button:
image

then add this html to your page (if you add it in an html element you see it in the editor and the published website, if you add it to the page header you see it in the published website only):

<style>
	.my-active-btn:active {
		background-color: aqua !important;
		transform: scale(1.2, 1.2) !important;
	}
</style>

Every time you want to use the same effect simply add the class to the element.

1 Like