How to create buttons using HTML and CSS

Last Updated on Dec 22, 2023

basic button, outline button, small and large button, and disabled button

Buttons are one of the most common components of a web design. A button allows users to take action by clicking it.

In this article, I will show you how to create different types of buttons using HTML and CSS.

Without further delay, let's get into it.

  1. Create the neccessary files

    Before we write our code, let's create the following files: index.html and style.css.

  2. Create the HTML Button

    Type the following code in index.html 

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to create buttons using HTML and CSS</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-danger">Danger</button>
    <button class="btn btn-success">Success</button><br><br>
    <a href="#0" class="btn btn-outline-primary">Primary</a>
    <a href="#0" class="btn btn-outline-danger">Danger</a>
    <a href="#0" class="btn btn-outline-success">Success</a><br><br>
    <input type="submit" class="btn btn-sm btn-outline-success" value="Small Button">
    <input type="submit" class="btn btn-primary" value="Disabled Button" disabled>
    <input type="submit" class="btn btn-lg btn-outline-success" value="Large Button">
  </body>
</html>

    In HTML, there are three elements that we usually style to be a buttons. These are the button, a, and input with the type="submit".

    In the code above, all the buttons have a class btn. Then, it is paired with a class, either btn-*, such as btn-primary, or btn-outline-*, such as btn-outline-primary. We can also have small and large buttons by using the classes btn-sm and btn-lg. Lastly, the buttons with the disabled attribute will also have a style.

  3. Style the buttons in CSS

    Type the following code in style.css 

    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
body {
  padding: 10px;
}
.btn {
  display: inline-block;
  font-size: 16px;
  padding: 12px 14px;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
}
.btn:disabled {
  pointer-events: none;
  opacity: .5;
}
.btn-sm {
  font-size: 13px;
  padding: 8px 10px;
}
.btn-lg {
  font-size: 19px;
  padding: 16px 18px;
}
.btn-primary {
  background-color: hsl(210, 100%, 50%);
  border: 1px solid hsl(210, 100%, 50%);
  color: white;
}
.btn-primary:hover {
  background-color: hsl(210, 100%, 40%);
}
.btn-danger {
  background-color: hsl(0, 70%, 55%);
  border: 1px solid hsl(0, 70%, 55%);
  color: white;
}
.btn-danger:hover {
  background-color: hsl(0, 70%, 45%);
}
.btn-success {
  background-color: hsl(152, 68%, 31%);
  border: 1px solid hsl(152, 68%, 31%);
  color: white;
}
.btn-success:hover {
  background-color: hsl(152, 68%, 21%);
}
.btn-outline-primary {
  background-color: white;
  color: hsl(210, 100%, 50%);
  border: 1px solid hsl(210, 100%, 50%);
}
.btn-outline-primary:hover {
  background-color: hsl(210, 100%, 50%);
  color: white;
}
.btn-outline-danger {
  background-color: white;
  color: hsl(0, 70%, 55%);
  border: 1px solid hsl(0, 70%, 55%);
}
.btn-outline-danger:hover {
  background-color: hsl(0, 70%, 55%);
  color: white;
}
.btn-outline-success {
  background-color: white;
  color: hsl(152, 68%, 31%);
  border: 1px solid hsl(152, 68%, 31%);
}
.btn-outline-success:hover {
  background-color: hsl(152, 68%, 31%);
  color: white;
}

    In the code above, we put all the common styles of our buttons in the btn class, such as font-size, padding, and border-radius, and then we have display: inline-block to work the padding properly in the button's container. We also have a cursor: pointer to show a hand when hovered. Finally, we have text-decoration: none for our a element buttons.

    In our basic buttons, such as btn-primary, we just used color, border, and background-color, and then in their hover state, we reduced the lightness of the background-color.

    On the other hand, our outline buttons use background-color, color, and border, and then in their hover state, we change the color and background-color.

    To make our butons small or large, we use the classes btn-sm and btn-lg. In those classes, we modify the font-size and padding.

    Finally, in our disabled button, we use pointer-events: none to prevent the hover effect from happening, and opacity: .5 to make our button look like unclickable.

Summary

In this tutorial, we have created different types of buttons, such as the basic button, outline button, small and large button, and disabled button. In our CSS, all our buttons have a btn class; this is paired with btn-* for the basic button and btn-outline-* for our outline button. In HTML, we implemented it using the element button, a, and input with type="submit".

© John Michael Balbarona