HTML buttons and CSS

You can use CSS to create buttons in your web pages that also match the theme of your website. You can use inline CSS properties in the style attribute of the button or add the CSS class/id for separately created CSS (internal or external).

In the following examples, we will use both ways to create the buttons i.e. by using the style attribute and using CSS classes. The last two examples show beautifully designed CSS3 based buttons. Use CSS 3 buttons only if you have no issue with the visitors using the older version of web browsers.

A button example with different CSS properties

The following example applies the font size, color, height, width etc. by using the class name to the buttons.

Experience this online

CSS button example with background image

The following example sets the background image by using CSS background-image property to the HTML button.

Experience this online

Button CSS example with style attribute of button

In the following example, a button is created with the same set of properties as in the above example. However, this time we used the style attribute of the buttons.

Experience this online

CSS3 button Example

The following example shows a CSS3 based button. Note that, this may have problems in the older web browsers like IE 8 or older versions.

Experience this online

CSS based submit button example

Following example shows an input type = submit button which is styled with CSS3. You can change different properties of CSS 3 as per needs. Note, no image is used in this button.

Experience this online

Also see HTML <a> | HTML form