Every aspect of your website matters. We’ve covered some of the big hitters, from form creation and header design to traffic metrics that track who’s heading to your site, how long they’re staying — and if they come back.

Just as important? The details. Color choice and layout matter. Simplicity and streamlined design are a priority. But there’s also an often-overlooked component that doesn’t stand out when done right, but can sidetrack the experience when it misses the mark: Buttons.

With users forming a general impression of your website 50 milliseconds after they arrive, you can’t afford to have anything out of place — and that includes a stray button.

Free Intro Guide to HTML & CSS [Download Now]

From buttons to click for more information or that link to product pages, buttons to request customer service or quickly add items to shopping carts, your website buttons are more than just window dressing; they’re essential design elements that help tell a story about your brand and guide visitors closer to your products or services.

Curious about website button design? Not sure how (or where) to get started? We’ve got you covered.

Button Design Ideas

While there’s no gold standard for button design, there a few simple guidelines:

  1. Clear: The button text and colors need to be clear, sharp and easy to understand.
  2. Concise. Minimal text on buttons is ideal. One word is the goal, two words at most. Any more gets cumbersome and confusing.
  3. Contextual: Where does the button lead? What does it do? Confusing buttons don’t get clicked.

Before you start building your own button, it’s worth taking a look at some free templates to get a sense of what’s out there, what suits your style, and what makes the most sense for your website.

Vecteezy

button design ideas vecteezy

Vecteezy free buttons are simple, to-the-point, and brightly colored, making it easy for users to find what they’re looking for and click through.

The designer has also added small icons for improved context — for example, the “Play Video” button has a small “Play” symbol and the search button features a magnifying glass.

Freepik

button design ideas freepik

These social buttons from Freepik are slightly more abstract, but definitely eye-catching. The use of two-toned color helps draw users in, while the addition of each social site’s symbol — paired with its associated color scheme — makes it easy for visitors to find what they’re looking for.

Here, context is king; while the words on the buttons don’t detract from their impact, the text is only one of three context cues on each button. Clever.

How to Design a Button

What if you want to design your own button? While basic buttons serve the purpose, you can also choose to dig deeper and add interesting effects — everything from buttons that change color when you hover over them to buttons with shadows, disabled buttons, or groups of buttons.

Your best bet for building? Button design in CSS (cascading style sheets). CSS is a tool that defines and describes how elements are displayed in HTML. Using a CSS editor, you can customize every aspect of your webpage, from headers and footers to sidebars and buttons.

While you can add CSS conditions to any website, differing tools require differing levels of expertise. If you’re just getting started, WordPress is a safe bet — the platform makes it easy to access, add, and adjust CSS settings and build new buttons. Here’s how.

First, head to your WordPress dashboard and click Appearance > Customize.

how to design a button wordpress

Source

Next, head to the bottom of the left sidebar and click Additional CSS.

how to design a button wordpress

Source

This will bring up a CSS editor page where you can enter any custom CSS code.

how to design a button wordpress

Source

Now that you’re here, what should you add to build great buttons? It depends on what you’re looking for. Let’s walk through how to alter your button properties.

Button Design CSS

This code creates a basic green button that users can click. Throughout this section, we'll discuss ways to edit and customize that button based on your button design preferences.

 

.button {

background-color: #4CAF50; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

}

 

Colored Buttons

Use the background-color property to change the background color of your button.

 

 

.button {background-color: #4CAF50;} /* Green */

Rounded Corners

Square corners aren’t always ideal. Use the border-radius property to change the border radius to round the corners of your buttons — the higher the pixel count (or percentage), the more rounded the corners.

 

 

.button {border-radius: 2px;}

Colored Borders

Use the border property to give your buttons colored borders with white backgrounds.

 

 

.button {

background-color: white;

color: black;

border: 2px solid #4CAF50; /* Green */

}

Hoverable Buttons

Use the :hover selector to change the style of your button when your users move their mouse over it. Use the transition-duration property to change how the hover effect.

 

 

.button {

transition-duration: 0.4s;

}

 

.button:hover {

background-color: #4CAF50; /* Green */

color: white;

}

Shadow Buttons

Use the box-shadow property to add shadowing to your button.

 

 

.button1 {

box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}

 

.button2:hover {

box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

}

Disabled Buttons

In some cases, you may need to disable buttons. Use the opacity property to add transparency to your button which creates a "disabled" look. You can also add the cursor property with a value of not-allowed to display a "no parking sign" when you mouse over the button.

 

 

.disabled {

opacity: 0.6;

cursor: not-allowed;

}

Building a Better Button

Sometimes, it’s easier to get help than build a button from scratch. Given the sheer number of buttons on your website — and the need for style and form consistency — it’s worth considering full-featured tools that let you streamline button creation and build out your site at scale.

1. Hubspot CMS

button design hubspot cms

HubSpot CMS is your one-stop shop for everything you need to build great websites. Design sites that suit your needs and capture visitor interest — then connect your HubSpot site to traffic and marketing solutions to make sure your design is delivering over time.

Choose from a host of prebuilt button templates and styles to get the perfect look for your site.

2. WordPress

button design wordpress

Coding CSS in WordPress is easy, and the website platform also comes with a host of site templates and plugins. While custom-built buttons in WordPress require more work, it’s worth considering if you’re comfortable with basic coding.

3. Wix

button design wix

Wix makes web design easy with great site features and functions. While you don’t get complete button customization with Wix, it’s a solid starting point if you need clear, contextual options that work right out of the box.

The Button Bottom Line

First impressions matter. Users almost instantly form a general opinion on your site when they arrive — so it’s worth making sure that every aspect of your website works together.

Buttons are a critical background element; customized, clear, concise, and contextual button design choices can help dress — and impress — your site for success.

New Call-to-action

 css introduction

Originally published May 11, 2020 7:00:00 AM, updated May 11 2020

Topics:

Website Design