Streaming live at 10am (PST)

Any tutorial for a slide button?


#1

Hi,
There is a nice animation to show the plan's prices on the page https://webflow.com/pricing

Is there a tutorial to create this button and the transition of prices ?


#2

Good find, nice little element. I've seen no tutorial for that. Here's my take http://sab.webflow.com/sliding-button

Parent element set to position:relative, round corner = height/2, border. Then inside:
1. one element at 50% width, shorter in height, little margin on top and left, background gradient, little border
2. one button set to position:absolute upper left corner 50% width add a class and remove background
3. copy of the button above with an extra class name, set to position absolute upper right corner

Then an interaction for each button affecting the bg element, onclik move 208px to the right, and for the first button copy of this interaction with move back to origin.

I didn't reproduce the hover color effect and active color effect though.


#3

Hi Vincent,
Thanks a lot for your help !!

Other samples are very interesting for me too.

Really good !

Regards.


#4