Like I’ve said many times before, one of the most important pieces of successful website design is hierarchy — using scale, color, and spacing to guide a user’s eye.
The homepage hero is the first thing a visitor sees. You have a matter of seconds to make an impression and guide them to their next action.
With every homepage hero, I recommend one to two call to action buttons. Most of the time, I use two — placed side-by-side. But how you style those buttons matters more than most people realize. One mistake can confuse a visitor, and if there’s no clear action to take, the buttons cancel each other out and become useless.
Setting up buttons for action
Two side-by-side buttons are essentially asking your visitor: do you want to take path A or path B?
There always needs to be a primary path and a secondary path. They cannot be equal — otherwise, your visitor won’t know which to choose.
For example, if you’re an agency that offers multiple services, avoid this:
View Marketing Services | View Design Services
These are equal actions leading down a very similar path. Instead, you need a primary action that moves the visitor toward your goal, and a secondary action that’s still valuable — just less urgent.
Those buttons might instead look like this:
Get Started | View Services
Get Started is direct and pushes the visitor to take action. But if they’re not ready, they can explore your services first.
So how do you style them to guide visitors toward Get Started?
How to treat side-by-side buttons
You know which path you want the visitor to take. Now design needs to communicate that — without the visitor even realizing it.
For your primary button, Get Started, make sure it:
- Uses high contrast (it should stand out immediately)
- Sits on the left
- Uses direct, action-oriented language
Your secondary button, View Services, is still important — but it needs to feel less prominent. My two approaches are:
- Use an inverse color treatment with a much lower contrast background
- Use a text-only button, often with a colored underline, to dramatically reduce its visual weight
Most of the time, I go with option two. In my experience, it creates a much stronger sense of priority between the two buttons. Like this example:
Design to Dollars takeaway
Design hierarchy plays a big role in guiding visitors down the path you want them to take. By making your primary action the obvious choice, you improve your chances of turning a visitor into a customer.
All because of the color of a button.
