Creating Buttons with CSS: Volume 1

In this tutorial, you will learn how to create buttons via styling them with CSS. If you don’t have a solid foundation with HTML and CSS, I would highly recommended checking out our free Beginners Blocks courses in our store. The buttons below are what I will help you learn how to create:

Let’s dive right into the code. Create a folder somewhere on your computer and name it whatever you want. This folder will be the home of our project. In that folder, create a file named index.html and create another folder called css. In the css folder, add a new file and name it styles.css.

Once our folders and files are set up, we can open a text editor or code editor of our choice and open our newly created index.html file. The first thing we need to do is define our basic HTML document:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta lang="en-us">
    <title>Buttons Examples Vol. 1</title>

    <link rel="stylesheet" type="text/css" href="css/styles.css">
  </head>

  <body>

  </body>
</html>

In the <body> element, we are going to need a bunch of buttons to spice up, so add the following:

<div class="wrapper">
  <h2>Buttons Vol. 1</h2>
  <br />

  <a class="btn-type-1" href="#">Download</a>
  <br /><br />
  <a class="btn-type-2" href="#">Download</a>
  <br /><br />
  <a class="btn-type-3" href="#">Download</a>
  <br /><br />
  <a class="btn-type-4" href="#">Download</a>
  <br /><br />
  <a class="btn-type-5" href="#">Download</a>
  <br /><br />
  <a class="btn-type-6" href="#">Download</a>
</div>

Let’s head over to our styles.css file. Since we’re not going to make an actual website, it’s fine if we give the wrapper <div> a huge amount of padding. Let’s add a style rule to add a bunch:

.wrapper {
  padding: 64px;
}

The First Button

Now, we can start adding style rules for our buttons, starting with the first. Let’s add the first style rule:

.btn-type-1 {
  display: inline-block;
  padding: 16px 32px 16px 32px;
  border-radius: 3px;
  font-family: arial, sans-serif;
  font-weight: bold;
  text-decoration: none;
  color: white;
  background: #1E88E5;
}

By setting the display property to inline-block, we can kind of get the “best of both worlds”, by being able to manipulate the button with properties that affect display: block elements, as well as still allowing the button to be displayed inline. The next property we’ve added, padding, is the shorthand version for defining padding. The first unit represents the top padding, the second stands for the right padding, the third stands for the bottom padding, and the fourth defines the padding on the left. The next property, border-radius, is fairly self explanatory. The border radius just means how rounded do you want the corners of the element. For all of these buttons, we will be using Arial as our font, then default to a default Sans Serif font, if Arial is somehow not installed. This is what the font-family property enables us to do. We can set the text in the button to use a bold font face. To do this, we can utilize the font-weight property. Since all of our buttons are anchor tags, they will appear as normal links until we style them. Because the buttons will display like normal links by default, they will display underlines under them. We don’t want this for our buttons, so we use the text-decoration property, and set the value to none. This will remove the underline from the button. The text color for all of our buttons will be white so it shows up well on the backgrounds. To set the text color, we can utilize the color property. To set the background color of the button, we will use the shorthand background property. When defining colors with CSS, we can either define them with hexadecimal color values, or using the color keywords provided in CSS. We can change the appearance of the button when you move the mouse over it via the following:

.btn-type-1:hover {
  background: #1565C0;
}

We can append the :hover selector to our .btn-type-1 selector. This will cause the specified styles to take effect when hovered over.

If we want the button to change appearance when you click/press down it, we can use the :active selector.

.btn-type-1:active {
  background: #0D47A1;
}

The Second Button

The second button will not need a button color, however we will be adding a border. We will also be adding a transition animation between button states. So, if you were to move your mouse over the button, it will transition from the current color to a new color over a period of time. Let’s add the code!

.btn-type-2 {
  display: inline-block;
  padding: 16px 32px 16px 32px;
  font-family: arial, sans-serif;
  font-weight: bold;
  text-decoration: none;
  border: 2px solid #2E7D32;
  border-radius: 32px;
  color: #2E7D32;
  transition: 0.2s ease-in-out;
}

When the user hovers over the button, we want to change the text color as well as the border color.

.btn-type-2:hover {
  border: 2px solid #555;
  color: #555;
}

Feel free to add another set of styles for the :active selector.

The Third Button

Now, we will be taking a look at buttons with gradients. Specifically, we will make use of linear gradients. We can combine a border with a linear gradient. Let’s put this into practice:

.btn-type-3 {
  display: inline-block;
  padding: 16px 32px 16px 32px;
  font-family: arial, sans-serif;
  font-weight: bold;
  text-decoration: none;
  border: 2px solid #B71C1C;
  border-radius: 10px;
  color: white;
  background-image: linear-gradient(#EF5350, #E53935);
}

The first argument for the linear-gradient function is the background color on the top of the button, and the second is the background color displayed on the bottom of the button. We can also change the colors of the gradient via the :hover and :active selectors as well. Let’s add some style properties for the :hover selector:

.btn-type-3:hover {
  background-image: linear-gradient(#F44336, #E53935);
}

We can provide a different color variation for the :active selector too!

.btn-type-3:active {
  background-image: linear-gradient(#E53935, #EF5350);
}

The Fourth Button

This next button has a more modern look to it, while maintaining a slightly less serious tone. We can add some depth to the bottom of the button by using the border-bottom property.

.btn-type-4 {
  display: inline-block;
  padding: 16px 32px 16px 32px;
  font-family: arial, sans-serif;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 4px solid #1B5E20;
  border-radius: 6px;
  color: white;
  background: #388E3C;
}

Then, we can add a set of properties for the :hover selector:

.btn-type-4:hover {
  background: #43A047;
}

After that, we want to move the button down 4 pixels, but also offset that with a margin of four pixels so the buttons don’t push other elements down when the user presses the button. All of this will take place using the :active selector:

.btn-type-4:active {
  position: relative;
  top: 4px;
  border-bottom: 0;
  margin-bottom: 4px;
  background: #2E7D32;
}

The Fifth Button

This button is similar to the previous one, however this one has a shadow around the base. This further gives the perception of depth to the button. We can accomplish this via the box-shadow property. Let’s add the code affecting the class btn-type-5:

.btn-type-5 {
  display: inline-block;
  padding: 16px 32px 16px 32px;
  font-family: arial, sans-serif;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 8px solid #4A148C;
  border-radius: 6px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.85);
  color: white;
  background: #AB47BC;
}

Let’s take a look at our use of the box-shadow property. The first unit defines the horizontal offset of the shadow. The second unit represents the vertical offset of the shadow. The third unit represents how far the shadow should spread. Finally, the fourth is the color of the shadow. We can define a semi-transparent color using the rgba function notation. In this case, we want to use a black color with 85% transparency. Next, we can add our usual :hover selector properties:

.btn-type-5:hover {
  background: #BA68C8;
}

Finally, we can add a set of styles for the :active selector. This time, we will decrease the spread of the box-shadow to make it smaller. When we add this, the “depth” of the button will appear like it’s actually pressed down.

.btn-type-5:active {
  position: relative;
  top: 8px;
  border-bottom: 0;
  margin-bottom: 8px;
  background: #9C27B0;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 1);
}

The Sixth Button

This final button has a glassy look to it. It almost looks like it came from the Windows 7 Aero era. It looks pretty cool and nostalgic! This type of button also looks great with any color. The styles for the default state of this button is quite similar to the gradient buttons above. The main difference is the addition of the :after selector. Let’s first start by adding the styles for the .btn-type-6 selector:

.btn-type-6 {
  display: inline-block;
  position: relative;
  padding: 16px 32px 16px 32px;
  font-family: arial, sans-serif;
  font-weight: bold;
  text-decoration: none;
  border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  text-shadow: 0px -1px #333;
  color: white;
  background: linear-gradient(#E65100, #EF6C00);
}

We can add the shine effect from the top of the button using this selector:

.btn-type-6:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: 50%;
  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.2));
}

We can finish up by adding the :hover and :active selectors.

.btn-type-6:hover {
  background: linear-gradient(#E65100, #EF6C00);
}

.btn-type-6:active {
  background: linear-gradient(#EF6C00, #E65100);
}

With that, let’s take a look at the result in our browser. Open the index.html file and we should see the following:

CSS allows developers and designers so many options to create beautiful, sleek websites. We hope this tutorial has been useful for you. If it has, and would like to receive updates on future tutorials and courses we release, be sure to fill out the form. Sharing this tutorial on social media platforms of your choice would be highly appreciated. We made this easy by adding share buttons to the bottom of each of our posts.

The full source code for this tutorial can also be found on GitHub.