Button Styles You Can Use That Aren’t Boring

M. Vissers
Mar 9 · 4 min read

Are you still using unstyled buttons?

Photo by Merve Sehirli Nasir on Unsplash

Buttons can be used in all sorts of ways. Buy buttons, Chat buttons, buttons for options, and buttons for actions. But how could you style your buttons? There are flat, raised, and all sorts of ways you can style them.

There is Material design, HI guidelines, and even the Fluent design language. So why would you style your own buttons?

Primarily to enforce branding and to create a unique experience for the user. Of course, it is easiest to leave the buttons unstyled, but any sane user would not like the design in that case. So here are a few designs with some explanation about why these could work.

Raised Buttons

Raised buttons are the most widely used buttons out on the web. The buttons are easy to find, easy to see, and usually should feature some sort of hover-state like a slight discoloration or a change in the shadow.

These buttons are used as buy buttons and other actions that the site would like you to click on, such as the publish button on Medium.

Flat Buttons

Flat buttons are mostly used as secondary buttons. These can exist right next to raised primary buttons and usually signify a secondary option that you do not want the user to click. Such as ‘cancel’, ‘add to wishlist’, or ‘log out’.

A lot of websites and apps use these buttons, and they usually blend in with the background in some way. They don't feature a lot of colors but might have a shadow or small border surrounding them to signify it is a button.

Icon Buttons

A subset of the raised and flat buttons are icon buttons. These buttons don’t feature any text and instead only have an icon. These are used instead of buttons with text whenever the icon signifies the proper action it will take and when space is scarce.

You will see these in more complex applications such as Photoshop, Word, or mobile apps. A lot of icon buttons don’t have any background or shadows, like on iOS.

Floating Action Buttons

Floating action buttons come from the Material Design guidelines by Google. These floating buttons reside in the bottom right corner of the screen and aren’t affected by scrolling. They almost always signify adding a document or item with a plus sign.

These buttons should only be used for simple tasks and should have icons that are easy to read. It should only do a simple operation such as adding something.

Button Groups

Sometimes, certain features or buttons should be close together. These functions can be very similar such as aligning text to the left, center, or right.

These should simply be grouped together and can contain some sort of dividers between them so they don’t get mistaken for a single button. You can use icons or text, while icons are more widely used since they don't take so much space.

Conclusion

In this day and age, buttons should be fun. Look at Duolingo, Facebook, or Microsoft Word. A button can strengthen the brand it represents by using colors, typography, or styles and it should be used as such.

Thank you very much for reading and have a wonderful day.

Geek Culture

Proud to geek out.

By Geek Culture

Subscribe to receive top 10 most read stories of Geek Culture — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

M. Vissers

Written by

Student at Hogeschool Rotterdam 👨🏻‍🎓. I write about programming or one of my many hobbies. Follow me on Twitter @MVissers4

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

M. Vissers

Written by

Student at Hogeschool Rotterdam 👨🏻‍🎓. I write about programming or one of my many hobbies. Follow me on Twitter @MVissers4

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store