Button Design with CSS: The Basics

Button design is at the core of product design. This blog post explains the world of buttons and CSS, from the simplest to the most complicated. Even if coding is not your strong suit, express your imagination. We’ll explore the fundamentals of button design with CSS, highlighting the many accessible types, teaching you how to add style, and bringing them to life with animation. We’ll only scratch the surface. We’ll talk about the myriad types of buttons CSS can design, how to style them, and how to breathe life into them through animation!

The Basics of Button Design with CSS

Introduction

First, let’s talk a little bit about CSS. CSS is a style sheet language that is an extension of documents coded in HTML. Essentially, it’s a tool for presenting data. CSS is one of the foundational languages behind the World Wide Web.

Designing Buttons

The first step to designing your button is to create it in the first place. You would start by coding the button element, notated as

CSS

.blue-button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}

HTML

<button class="blue-button">Click me!</button>

Example

Click me!

For the designers among you, as you know, there are different elements to style. These can include the display, background color, padding, width, color, and text alignment.

Different Types of Buttons

There are many different types of buttons that you can create with CSS. Among these are the popular basic buttons, colored buttons, rounded buttons, shadow buttons, disabled buttons and hoverable buttons. We’ll look at each type in more detail below.

Basic Buttons

These buttons don’t have any extra style features to them, other than your basic shape. Imagine a button that’s just a white circle with text in the middle. That would be an example of a basic button. It’s kind of the “next step” from a hyperlink.

See the Pen
Basic Buttons by Simon (@simonwebdesign)
on CodePen.

Color Buttons

Colored buttons are kind of self-explanatory, but there is specific code you need to use to apply this style, and that code is {background-color}. That’s all for this section!

See the Pen
Color Buttons by Simon (@simonwebdesign)
on CodePen.

Rounded Buttons

As we further our exploration of how to create different types of buttons, you may see a trend. There is a small snippet of code you use to create each of the types of buttons. For rounded buttons, that code is {border-radius}.

See the Pen
Rounded Buttons by Simon (@simonwebdesign)
on CodePen.

Shadow Buttons

To make a shadow button, the snippet of code you’ll need to use, then manipulate is {box-shadow}. This box shadow takes on a number of properties, including x- and y-axis offsets, a blur radius, a spread radius, and a color.

See the Pen
Shadow Button by Simon (@simonwebdesign)
on CodePen.

Disabled Buttons

To create a disabled button, you use the pseudo-class :disabled. This will cancel out its functionality. Why you would want to purposefully make a button disabled is a bit curious, but hey, we’re here to provide fun info, not question your motives!

See the Pen
Disabled Button by Simon (@simonwebdesign)
on CodePen.

Hoverable Buttons

Using the snippet of code :hover as a style selector enables the hovering feature of a CSS-coded button. Imagine the possibilities!

See the Pen
Hoverable Button by Simon (@simonwebdesign)
on CodePen.

Styling Buttons, Summarized

As we’ve seen, CSS allows us to customize the look and feel of our buttons by changing their size, color, border radius, font size, background color and more. We can also use CSS to add animations such as hover effects or glow effects to our buttons.

See the Pen
Untitled by Simon (@simonwebdesign)
on CodePen.

Summary

This blog post went through examples of designing different types of buttons with CSS. Buttons make the digital world go ’round. They’re ubiquitous on the World Wide Web, and are a super valuable tool to have in your toolkit if you can design different ones. Happy button-designing!

Button CSS Resources:

1. Start Engine PSD Button
2. 92 Beautiful CSS Buttons Examples
3. CSS Buttons – W3Schools
4. 193 CSS Buttons – Free Frontend
5. Simple CSS Button Examples
6. 60 cool CSS Buttons – with Animations! – webdeasy.de

Simon Urbina

Simon is a Product Designer and Front End Dev with over 20 years of experience. He started as a graphic designer and illustrator coding his first website in 1996. He has worked with brands like Publix, Microsoft, and Discovery Channel.

Twitter