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:

CSS Tutorial to build your own CSS website

CSS TutorialAs promised, the first 3 videos are live, with an added bonus of a 4th video covering how to create a CSS file, duplicating your page and getting your website started.

Part 1 begins with the basic CSS code, and defining the parameters that will make up your website. View all 4 of the videos in the video section.

Video #1 can be found here

Continue reading

Share This:

3 Part Guide To Building A CSS Website

Over the last few years I have been approached many times asking for tips on how to build custom websites using up to date CSS build techniques.

CSS, or “Custom Style Sheet” is essentially a way to build websites that are quicker to load, easier to work with and compatible with more web browsers. Unlike original HTML which used clumsy tables and hard coded formatting, CSS is more fluid, and much much more powerful.

The problem is, those new to web design often turn to low quality web-design software to help them with their sites. Many of these still use the old style HTML, so the sites they build, while good looking and serving their use are not fully compatible with the search engines, and therefore seriously a major issue.
Continue reading

Share This: