Streaming live at 10am (PST)

Material Design Button Behavior


#1

Is it possible to integrate or recreate a button with a ripple effect like in Material Design?

Example:
Accent-colored raised button with ripple
https://getmdl.io/components/index.html#buttons-section

THX

Here is my public share link: LINK
(how to access public share link)


#2

Hey,

Your public share doesn't work.

Anyway i would have done it like this

http://ripple-button.webflow.io/

https://preview.webflow.com/preview/ripple-button?preview=788a6b581f11e6a9a71c63bb86207f30

I can send you the project if you want


#3

Hey zbrah,
thx for your reply.
The button behavior in your example is static meaning no matter where I click on the button,
the effect starts at the bottom and goes up.
But in the original example it adapts to wherever I click on the button.
The ripple starts there and expands outwards.
Is there a way to achieve this as well?

My project is not public ready yet. O:-)


#4

Oh ok i didn't realised,

Well yes, you could do 4 trigger

Each trigger has a fixed width and height, which is basically their parent width and height divided by 2 (in my example parent would be button container relativ)

Triggers are set on absolute position (corner top left, corner bottom right etc..)

Then ripple effect is not one but 4 div, with different initial apparence for each one.

Tell me if its not clear ^^


#5

@Robert1,

I've edited the first link.
Now working as expected. You can start from this example and divide by as much slice as you want.

https://preview.webflow.com/preview/ripple-button?preview=788a6b581f11e6a9a71c63bb86207f30

http://ripple-button.webflow.io/


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.