CSS Tips: How To Create Buttons Using CSS

cssbuttonsA long time back buttons were all the rage because it took some pretty nifty javascript knowledge to make them work. But that’s changed thanks to the power of CSS.

Buttons can be highly effective ways of highlighting links on your website, or displaying a “call to action”. In my experience people are often drawn to buttons more than standard links.

There are a few different ways you can use CSS to create buttons. The method that I tend to use most (and one of the simplest) is by using CSS to created class on an A tag.

The CSS Code:

a.button {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #CCC;
padding: 2px;
text-decoration:none;
text-align:center;
}

a.button:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

The HTML Code:

<a class=”button” href=”#”>Button</a>

Explanation:

First of all you will notice that there are 2 elements to the CSS.

The first is the actual styling for the A tag. This is the core design of the button, including the width, colors, shading etc. You will notice that I have given my elements a class called “button” by adding .button after the a in the CSS. This enables you to create multiple buttons of different styles using different class names (button1, button2, orangebutton, bigbutton, etc). In the code I have used i’ve set the background to light grey with a solid background that will be 8am wide. Virtually all this CSS is fully customizable. In fact, the only thing that you should keep intact is the “display:block” section.

The second section of the CSS refers to the hover effect of the button. What this does is tells the browser what to change after the mouse “hovers” over the element. Again, you will see i have connected it to the same class as the first section by giving it the .button class. The top / left elements will move the button slightly on hover and the border will change accordingly to give a hovered 3D effect. Hover over the demo button above to see how this works.

When you add the HTML code to your page, simply give it the relevant class (see code above) to match it all up and create CSS magic!

Want to fancy it up? Try adding rounded corners to the a.button section (ie. border:radius:4px;) to give a web2.0 type look and feel.

Helpful Links:

Webcredible (page includes CSS buttons)
Speckyboy CSS Styled Buttons

Share This: