I’m currently designing for a project and struggling to find a consistent way to make my buttons look, and more importantly feel, clickable. While they may align with current brand standards, they don’t inspire user interaction. So in order to combat this problem, I’m creating a little guide with the different types of buttons in web design.
Text Links The most common and simplest form of buttons is text links. They look like this. Text links usually hide within a sentence but can on occasion stand alone. They’re super common because most browsers automatically underline and change the color of linked text. Of course, these can be customized with different attributes.
I find that in my designs, text links work really great when you are giving a snippet of information. They are also wonderful when you have data or quotes since you can link out to the source without disrupting the text too much. One of my main rules for text links are, don’t use the word ‘click’ (For example, “Click to read more”). This can become a problem if you are using a touch-screen and don’t have a mouse to click anything. Not to mention it’s dull and overused. Try other phrases like “View more here”, “Continue reading”, or “Learn more”.
Text Buttons Not to be confused with text links, these buttons usually have a shape as well as text on top of them. They can have a variety of styles including outlines, drop shadows, rounded corners and more. Text buttons are a great way to start thinking about the digital landscape of your brand. Is your brand more corporate, requiring rectangles and solid blocks of color? Or maybe it’s a bit more elegant with a clean, gold outline. Either way, text buttons are a great way to think about your brand online. This is a pretty basic one here.
Icon Buttons These buttons tend to live a lot on mobile devices. Icon buttons take up less space than text links or buttons and can be pretty intuitive if created correctly. Think of the home icon, remember the days when that was plastered on literally every phone? Now, realize that the home button has an entirely different meaning on Apple Maps. If I press that home button, the application is giving me instructions to drive to my home. In different contexts, icon buttons can have different meanings, which is why they can get tricky to use.
Text + Icon Button This is a button that I personally don’t like too much. It generally combines an image with text. It can be successful for things that may take some time to load, such as payment processing buttons, but here, the text + icon buttons are used more as confirmation than an enticement to click. They can work well with the addition of color for confirmation or cancellation buttons.
Tabs Tab buttons are often used in menus, but I think they add a fun element of surprise to many designs. They are generally attached to more content and help to create a system that an older user is probably pretty familiar with. Tab buttons also work well for organization! Think of the 50 tabs you probably have open on your browser. Each one provides an icon and, depending on the size, the title of the page you are on. Slider buttons (Toggle Buttons) This button goes by switch button too. Slider buttons provide a simple level of interactivity that is often used to denote the difference between two content types. For example, light and dark themes or on and off. They can also be used to confirm the submission of information, but I prefer a confirmation message or an icon button for this. There’s another form of toggle buttons that are filled circles. They are often used for multiple-choice options. Here are some examples.
Of course, there are more options for buttons based on actions and design and they are often designated into subcategories. Primarily, I’m hoping that this article will give a quick little overview of some styles of buttons. Hopefully, you will consider these as you start to develop a brand’s online presence as well.
If you enjoyed this overview of buttons, give this article a clap. You can also let me know in the comments if you’d like me to add more to this guide. Either way, thank you for reading 🙂 feel free to check out some of my other blog posts here.