How do I change the style of an HTML form button?

Updated: 05/23/2017 by Computer Hope

When adding a button to a web page, it is recommended that you use CSS to create its styling. Utilizing CSS is the preferred method as it is a more efficient and organized way to store style code for reuse in more than one area on your page or site. As you can see with the example below, many attributes can be used to manipulate each button type.

CSS text for button styling

<style type="text/css">
#submit {
  background-color: #bbb;
  padding: .5em;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 6px;
  color: #fff;
  font-family: 'Oswald';
  font-size: 20px;
  text-decoration: none;
  border: none;
}

#submit:hover {
  border: none;
  background: orange;
  box-shadow: 0px 0px 1px #777;
}
</style>

HTML code for creating the button

After the CSS has been added to the page that CSS can be applied to any button using the id="submit" code in the HTML.

<button id="submit">Example Button</button>

Example of button created by the CSS

You can see from the above example that when the mouse is not hovering over the button, the button has a light gray background and white text. When the mouse hovers over the button the background changes to orange. Also, the corners of the button are rounded instead of squared off, like a standard form button.

Additional information

  • See our HTML help page for further information and related links on this term.