How to change the style of an HTML form button

When adding a button to a web page, we recommend you use CSS (Cascading Style Sheets) to create its styling. Utilizing CSS is the preferred method, being 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 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 is added to the page that CSS can be applied to any button using the id="submit" code in the HTML (HyperText Markup Language).

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

Example of button created by the CSS

Example Button

You can see from the example above 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.