Webflow Button Widget
Create your Button widget
Why People Love Elfsight
Wouldn’t it be nice if your visitors always knew where to click next? The Elfsight Button widget makes that easy. Whether you want to link to a product, trigger a form, open a file, or direct users to a special offer, this widget helps you build eye-catching buttons in minutes.
No coding, no layout headaches – just clean, responsive design that fits perfectly with your Webflow project. You can place it anywhere on your page, style it however you like, and connect it to any action that matters to your business.
Did you know?
According to marketing research, buttons can generate up to 45% more clicks than regular text links.
Turn more visitors into customers with Elfsight’s Button – it’s free to start using and only takes a couple of minutes to set up.
Key Features of the Webflow Button Widget
Elfsight is made to make your website easier to use and more clickable. Here’s what you can do with it:
- Flexible design: Choose from endless combinations of colors, fonts, shapes, and hover effects to fit your branding perfectly.
- Custom actions: Link to a page, send an email, or launch a chat – you decide what happens when users click.
- Floating and inline layouts: Place it inside your content or let it hover on screen for constant visibility.
- Responsive design: Works perfectly on all devices – desktop, tablet, and mobile – right out of the box.
- Icon support: Add icons to your buttons for instant recognition and a polished, modern look.
- Fast installation: Add it to your Webflow website in minutes – no technical setup or extra plugins required.
Try all these features in the live editor – no registration needed.
How to Add the Button to Webflow
Embedding your button on Webflow only takes a few moments with Elfsight. Here’s how to do it step by step.
Method 1: Inline Button
Best for buttons you want to display directly inside your page content.
- Open the Elfsight Editor: Pick a template and start customizing.
- Set Your Design: Choose text, color, icon, and the action you want the button to perform.
- Get the Code: Click “Add to website for free” and copy the embed code.
- Embed on Webflow: Open your Webflow Designer, drag an Embed element to your chosen section, and paste the code inside.
Method 2: Floating Button
Perfect if you want a button that stays visible as visitors scroll.
- Select a Layout: Choose a floating option in the Elfsight editor.
- Customize: Pick position, style, and action – for example, open a chat or link to a form.
- Copy the Embed Code: Click “Add to website for free.”
- Paste into Webflow: Go to your project settings, open “Custom Code,” and paste the snippet before the closing
</body>tag.
Need a hand? Check our Help Center or explore our blog for more tips on how to add a button to your website. You can also share ideas on our Wishlist or track updates in the Changelog.