By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

How to create Buttons with CSS

Tutorial on how to use CSS to create Buttons, including fully working examples.

Edited: 2015-04-01 11:42

You can create hover effects on just about any element, using the hover Pseudo-class. But hover effects are most commonly applied to links, usually to change the color of the links, when hovered with the mouse pointer. They can however also be used to create CSS buttons.

The hover Pseudo-class can also be used to give your links the appearance of buttons. This is done by first applying the display property, and setting its value to block.

A elements are inline elements, and would therefor need to be set as block, before you can apply a width and a height.

Buttons in CSS

Its very easy to create buttons in CSS. The below will explain the selectors used, and then explain the code it self.

ol explained

Removes the margin and padding, and the numbering on the list (the list-style).

ol {
  margin:0;padding:0;
  list-style-type:none; /* Removes the numbering */
  width: 400px;
  margin:1em;
  border-top: 1px solid #166CFF;
  border-left: 1px solid #166CFF;
  border-right: 1px solid #166CFF;
}

li a explained

The li a CSS, selects the a elements inside the li elements.

li a {
  display:block;
  color: #6366FF;
  background: #e2ffd6;
  border-bottom: 1px solid #166CFF;
  width: 100%;
  min-height: 2em;
}

The display property will set the a elements to block elements, rather then the their default inline. This will allow us to apply the width and min-height properties.

The color property is used to change the text-color, and finally the min-height allows the buttons to get expand their heights, in case the 2em given doesn't provide enough space for the button text.

The hover Pseudo-class

Basically we use the same classes as when working with links. For example, the hover Pseudo-class, which controls the hovered state of the buttons.

li a:hover {
  background: #E2E2E2;
}

The visited Pseudo-class

I chose only to change the background, but you can change just about anything. You should also remember, that its possible to change the visited state of links, which is done like below.

li a:visited {
  color: #D263FF;
}

I didn't add this to the full example, so you can try and add it on your own.

Full CSS buttons example

This is the full example shows how to create the appearance of buttons, using an ordered list and some A elements with a background and some borders applied.

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>Creating Buttons with CSS</title>

    <style type="text/css">
	ol {
	 margin:0;padding:0;
	 list-style-type:none; /* Removes the numbering */
	 width: 400px;
	 margin:1em;
	 border-top: 1px solid #166CFF;
	 border-left: 1px solid #166CFF;
	 border-right: 1px solid #166CFF;
	}
    li a {
	 display:block;
	 color: #6366FF;
	 background: #e2ffd6;
	 border-bottom: 1px solid #166CFF;
	 width: 100%;
	 min-height: 2em;
	}
	li a:hover {
	 background: #E2E2E2;
	}
    </style>
  </head>

  <body>
   <div id="Basement">
     <ol>
      <li><a href="/">Your first CSS Button</a></li>
      <li><a href="/">Your first CSS Button</a></li>
      <li><a href="/">This is a very long button text, included to show the padding on the button. It should wrap nicely at 0.2em distance to the borders.</a></li>
    </ol>
   </div>

  </body>

</html>