How to make a simple, extensible button - HTML/CSS

In this tutorial, I will show you how to create a simple, yet powerful button that is easy to read and is extensible. (Skip to the result)

First, create a new div on your HTML page with class="button"

<div class="button">Submit</div>

Then, define the button class in CSS:

.button {
}

Now, let's give it some shape:

.button {
  display: inline-block; /* forces div width to conform to content */
  border-radius: 5px; /* creates rounded corners */
  padding: 8px 12px;
}

We want to make our button extensible, so let's define colors in a separate class:

.button.blue {
  background-color: #5DADE2;
  color: #fff;
}

...and let's define button and font sizing in separate classes as well:

.button.small {
  font-size: 0.8em;
}

.button.large {
  font-size: 1.2em;
  padding: 10px 20px; /* Give the button more room since it is bigger! */
}

Now let's add some interactivity by adding a hover behavior. In this case, let's make the button color slightly lighter when the user mouses over it:

.button:hover {
  filter: brightness(110%); /* Brightens the current background color by +10% */
}

Now let's add some additional attributes to complete our button:

.button {
  display: inline-block; /* forces div width to conform to content */
  border-radius: 5px; /* creates rounded corners */
  padding: 8px 12px;
  cursor: pointer; /* show pointer on mouseover */
  user-select: none; /* prevent text selection */
  transition: 0.2s; /* makes the hover behavior smoother */
}

Let's add the new classes that we defined to our div and let's see what we got!

<div class="button blue large">Submit</div>

Result

Sweet! Now, let's get fancy and extend our button by creating a new class to add a shadow effect:

.button.shadow {
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); /* black shadow at 0.2 opacity */
}

Your Task

Use the jsfiddle above to add a shadow to your button. How would you do it?

Congratulations!

Here's what we learned:

• We created a simple, yet infinitely extensible button by using separate, related classes.
• We used descriptive words to define our classes so that it could be easily read and interpreted by other developers. Our button is "blue, large, and has a shadow!" Cool!