5 beautiful button designs to copy/paste into your next project

No time for custom button designs? These five buttons are ideal to clone, copy, and paste into your next project.

Aaron Grieve
June 19, 2018
Resources

Great design is all about attention to detail — and button design is no exception. Often overlooked, buttons can set the tone of a site and have a significant impact on viewers, as they’re a key point of interaction. We’ve found five great options to get you started.

We don’t always have time to create our own custom buttons — and that’s okay. With Webflow’s cross-project copy/paste feature, you can copy and paste pre-made buttons into your next project — for free!

We’ve rounded up five beautifully functional button designs, created by members of the Webflow community. Just clone, copy, and paste into your next project.  

Now — let’s press on.

1. Ben Parker’s social button

Take your social-sharing buttons to the next level with Ben Parker’s interactive button. A single click cues an animation that will make your site more memorable and functional:

"Share this" button that when clicked rolls out a selection of social media buttons.

Check out a preview of Ben Parker’s button or clone the project for your own site. Then check out our tutorial to hook these up to your Webflow CMS Collections items.

2. Marco’s simple, elegant button

Marco Meßer designed a simple button — part of a larger, free template — that’s extremely easy to use. Because the button uses CSS transitions instead of Webflow Interactions, it’s perfect for a no-fuss copy/paste experience.

Button that inverses color and reveals an arrow on hover.

Preview the button or clone the project for your site.

3. Stu's pop-out “Buy” and “Download” button

The hover interaction in this pop-out button, designed by Stu, is perfect for hiding — and showing — non-essential content on a page.

Add this button to your client’s downloadable resource center or online shop — keep it in mind in anticipation of Webflow’s Ecommerce

release!

On hover this button slides out top and bottom tabs with further information.

You know the drill: preview this button or clone the project for your site.

4. Riley Jones’ donate button

Looking for a way to use your talents for good? Give your users an opportunity to give back with this donate button by Riley Jones.

A fresh take on the “buy me a coffee” button used by developers across the world, this slick “Coffee Me” button is a great addition to any site looking to do good.

On hover the cursor changes from an arrow to a hand and scrolls from "coffee me" to "can't wait."

At the risk of sounding like a broken record — preview this button. If you like what you see, clone it for your next project.

5. Digital Bake’s magnificently minimal button

One of the most popular buttons from Digital Bake's website is this simple, understated button that packs a punch with an unexpected hover effect.

This button has limitless use cases — simply change the text and colors to suit your website and CTA and you’re set.

On hover the cursor changes from an arrow to a hand and a circle expands to frame the text.

Say it with me now — go ahead and preview the button or clone, customize, copy, and paste.

Share your favorite buttons

Have you found or created an amazing button we missed? Go ahead and share in the comments below!

Aaron Grieve

A Webflow fanboy and power nerd of all things creative, I’m always trying to push interactivity that little bit further.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.