Are you still using unstyled buttons?
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 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 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.
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.
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.
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.