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:
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.
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
You know the drill: preview this button or clone the project for your site.
Discover the processes and tools behind high-performing websites.
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.
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.
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!
Published
June 19, 2018
Category
Resources
