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

I recently came across the tutorial on Webflow University regarding "how to add a WhatsApp chat widget to your webflow projects" realising that I didn't want to pay the $5 a month fee for Elfsight I had a look at what it was doing and it really wasn't doing very much.

Installation: Copy and paste or clone this project, if you copy and paste you will need to recreate the interactions.

Also include the following script into your project custom code (before Body close:

<script>
$(document).on('click', '#close-chat', function(event) { 
    event.preventDefault(); 
    $("#whatsapp-button").click(); 
});
</script>

This will prevent the close button from performing its default action, so you can manage the open and close through one interaction.

Finally, to connect your whatsapp account, just change the link on the "Start WhatsApp chat" button with your telephone / Whatsapp number:

https://api.whatsapp.com/send?phone=+ADDNUMBERHERE

Free - WhatsApp Widget

Free Whatsapp Chat Widget

Webflow University

You can add neumorphic elements to your site (such as buttons or cards) by applying three styling properties: the same background color as your site, a dark shadow and a lighter shadow on the opposite side. To take it up a level, you can add a hover effect by adjusting your shadows to make it appear as if your element is floating in a neumorphic space.

Read about it: https://university.webflow.com/lesson/neumorphic-button

Neumorphic button

floating action button

floating-action-button

Fabs are super useful to highlight the main action that a user has to take. It has been popularized by Google's Material Design. They can be used for actions like: share, favorite, add, send, etc...

This was definitely a challenge that ended with a good result although it can be polished. The animation is made using only Webflow (without any custom code).   

Sign up for the lesson: www.webflowtips.com/b/how-to-create-fab-1

If you have any questions feel free to comment.

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

21 of 50

Webflowtips - Fab #1

Animated Fab #1

These animated loaders and switch buttons are made with simple divs and interactions2.0. 
No custom code. 

 --> Turn ON/OFF any upper buttons to see individual loader animate

Inspired by - Concentric Circles, Louis Hoebregts

Loader Circles

Loading Spinners

Hey everyone!

Here is a floating social share button using Floating-Share Jquery plugin. Follow me for more related Webflow assets.

Make sure to clone it.
If you like these contents, make sure to follow us and check out uiflow.co

Visit us @ uiflow.co

Uilfow Floating Social Share Buttons

Uiflow floating social share buttons

The site presents a social app based on birthdays.

I've created a simulator to get the first glance of the app. 
Click on the star button to swipe between the profile with some nice effects. 🌟🌟🌟

I hope you like it :)

Doppels - Social app

Social app simulator

A short CSS code for floating labels on a form.

An explainer can be found in the Tiny-Resources website:

https://tiny-resources.com/elements/floating-labels-interaction

Floating Labels

Floating Labels Interaction

webflow2guide

A body scan data management and tracking ‘software as a service’ web app for consumers. Click the floating yellow "log in" button in the top right to get to the main interface. 

The brand aims to resonate with both fashion and fitness oriented users. The main application interface is built with an emphasis on clear information. The aim is to have an expandable widget system so users have a simple, yet customizable, view of the data they're most concerned with.

Discover floating button websites built by the Webflow community

Discover floating button websites built by the Webflow community