Discover the best play-button websites created by professional designers. Get inspired and start planning your perfect play-button web design today!

From my Webflow online course community came the wish to build this video player, which basically runs in a loop without sound as a background video. 
If you click on on the unmute button, the video plays from the beginning and the sound is activated.  

We need a bit of custom jQuery code for this. In addition, the Vimeo API must be included if you want to address Vimeo iFrames.

Watch the tutorial here: https://youtu.be/mKFZxHpYGng

Vimeo Background Video with Play Sound Toggle

A tutorial how you can quickly give any element in Webflow a magnetic effect. This is known especially from buttons of all kinds and is easy to implement with just one interaction, which you can then apply everywhere via a CSS class.

Tutorial: 
https://youtu.be/1iFp2iOq5pI

Magnetic Button

Easy Magnetic Elements and Buttons | Template

Flowout

Layer - mobile app landing page.

If you need help setting up and modifying the template, or if you would just like to show your support, you’re welcome to visit us on flowout.co

Flowout Layer

The project was made to help a forum question > https://forum.webflow.com/t/pulsing-play-button/81085

Pulsing Play Button

Pulsing play button

The project was made to help a forum question about using the pulse button to trigger a popup with Wistia video.

Pulsing play button custom popup

Pulsing play button popup

Welcome to our Play button animation page!

Feel free to clone this project and use this play button animation on your next Webflow project!

Follow us on instagram
https://www.instagram.com/tene.lisi/

Play Button Animations

Play Button Animation

I have seen many projects lately which add sound effects to buttons so I wanted to share how to do it.

Each of the sounds needs their own code. You can find the code in each embed.

To add them to your project:

1. Add a class to the div where you want the sound to play when clicked.
2. Add an embed and paste the code in your project.
3. Change the code to match your class name and the mp3 address where you hosted your audio file.

****Important****

- Do not link to the audio files on the clonable. Make sure to host the audio file in your server. These files will be removed and they won’t work in the near future.
- You need to publish the project to hear the sounds

Sounds by:

soundbible.com
Mixit.co

Sign up for the lesson: www.webflowtips.com/b/how-to-add-audio-sounds-to-buttons

If you have any questions feel free to comment.

P.S Like or follow if this was useful for you 🙂 🙌

Buttons with sound

Buttons with Sounds / Audio

Auto-playing tabs using the native tabs component and some custom Jquery to loop the tabs, trigger the play/pause, as well as animate the line within each tab link.

Autoplay Tabs + Pause

Autoplay Tabs w/ Play/Pause Button

Simple add to cart animated button. 

Feel free to play with it and add it to your projects.

Cheers!

Lottie Animated Button

lottie-animated-button

Google has nailed the Pressed State for buttons in their Google Material Design System, Why? Well, It's subtle for one but more importantly, it gives the right Affordance to what has just happened. After you click you know the click has worked, and in this interaction also adds the added benefit of letting the user know where exactly the click has taken place by creating a ripple effect emanating away from the place where you have clicked.

For more check out https://johnferreira.design/learn

Discover play button websites built by the Webflow community

Discover play button websites built by the Webflow community