8 principles to text buttons

Tegra - August 31, 2019 - 0 comments

8 principles to text buttons

8 principles to text buttons ⁣

Courtesy of @zanderwhitehurst

Rarely designed right and so powerful for a clean interface. Text buttons are the underdog of the button family and here is how to design them properly.

🏃‍♂️ Text buttons are never given the space they need to breathe and perform like a button. Use 8pt padding rules.

🎨 A text button is not a different coloured body text. It’s a button and has states so try to design all of these vs changing text from dark to a blue link color. ⁣

Be free to send us any feedback by reply or reach using DM on Instagram

Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Principle 1. Identifable. Text buttons easily get lost in your UI. They get lost amongst text or busy elements of your UI. Make them super obvious amongst your interface and style them like buttons, not colored text.
Principle 2. Discoverable. Text buttons sometimes have their own space to grab attention. But typically, they are packed amongst other buttons or components. Make sure your text buttons are easily discoverable with enough margin in a component.
Principle 3. Emphasis. text buttons don't have high emphasis actions attached to them. When using multiple buttons ensure the text button doesn't look like the disabled state of another button.
Principle 4. Placement. Avoid treating the button like a different coloured piece of body text. It serves a really important action and requires thought. Avoid vertical stacking of buttons if you can place them horizontally.
Principle 5. Styling. They are easy to create right? Change the color to blue and you have a text button. Experiment with capitalizing your text buttons and always layer your text buttons with a container and states which we'll over next.
Principle 6. States. Another skippable phase of designing a text button is forgetting the various states. Enabled, disabled, hover, focused and pressed all need to be considered. Otherwise you'll get a dreaded blue and purple default underlines.
Principle 7. Padding. Text buttons are buttons. They, like buttons, need space to breathe and for consistency, it help to follow the 8pt rule when creating your text buttons. I've blown this text button up to show you dimensions.
Principle 8. Icons Just like contained. Just like contained and outlined buttons, text buttons can have icons. Similarly, follow an 8pt rule for the icon and be sure to match the color of the text with the icon to connect the elements into a single button.
Learn, share and follow. Thanks! For daily UX, UI & product design inspiration follow.

Try to experiment with buttons design using Webflow – all-in-one web design tool that allows users to design, build, and launch responsive websites visually

👍 I hope these principles help for your next text button designs! Have tips to add? Let’s discuss in the comments ⬇️

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *