How to Make a Simple Button in HTML & CSS

Buttons are an important part of any website. You can use them to allow readers to interact with your website, submit information, and link to other websites and pages.

You can create three types of buttons in HTML and CSS depending on their functions. These are:

• Link buttons
• Form buttons
• Javascript buttons

1. Create a Simple Link Button

You may sometimes want a button that behaves like a link. You can use the button to direct the readers to other parts of the website.

To create the button, start by creating a link in HTML.

<a href="https://freecodecamp.org">Learn Coding for Free</a>

Learn Coding for Free

Then, style the link so that it looks like a button.

a {
  background-color: #a61e4d;
  color: #eee;
  padding: 15px 25px;
  text-decoration: none;
}

a: hover {
  background-color: #d6336c;
}

Result

2. Create Simple Form Button

Forms are essential for collecting data from websites. Using a button, your readers can save information to your website database. You can either use the input type button or submit to create a form button.

Using Input type Button

HTML Code

<input type="button" value="Sample Button" />

CSS

input[type="button"] {
  background-color: #a61e4d;
  color: #eee;
  padding: 15px 25px;
  border: none;
}

input[type="button"]:hover {
   background-color: #d6336c;
}

Result

Using Input type Submit

HTML Code

<input type="submit" value="Another Button" />

CSS Code

input[type="submit"] {
  background-color: #a61e4d;
  color: #eee;
  padding: 15px 25px;
  border: none;
}

input[type="submit"]:hover {
   background-color: #d6336c;
}

Result

You can add some styling to make the button look presentable.

3. Create simple Javascript Button

Maybe open or close a navigation menu, view the next item on a slider, or switch between different tabs.

HTML Code

<button type="button" id="toggler">Light Button</button>

CSS Code

button {
  background-color: #a61e4d;
  color: #eee;
  padding: 15px 25px;
  border: none;
}
button:hover {
  background-color: #d6336c;
}

Result