Simple CSS Style Anchors For Your Blog

I have been working on my blog style lately. One feature that I wanted to have was a way to easily convert anchor tags into a styled button to highlight a link. For instance, I often post links to live demos, downloads, or links to other web content. At times, these links are important and should stand out. The following are examples of the effect:

Demo Download Link

1. Create HTML

I use Windows Live Writer to create my blog posts. It is a great tool and free. The first thing to do is to create a normal anchor tag. Then use the ‘source’ view to add a class to the tag. The final markup should look like the following.

    Demo
    Download
    Link

I sandwiched the links in paragraph tags to force them to be on a new line.

2. Create the Styles

I use the following CSS to each of the classes. For brevity, I am only showing the style for the ‘demo1’ class.

.demo1
{
    background: #222222 url(images/demo.png) no-repeat scroll 50% 100%;
    border: solid 1px #333333;
    width: 70px;
    height: 70px;
    display: inline-block;
    padding: 3px;
    text-align: center;
    padding: 0;
    text-decoration: none;
    font-weight: bold;
}

.demo1:hover
{
    background-color: #000;
}

This style does two things. First, it alters the look and feel of the anchor tag to include a background (image & color), border, and few other subtle effects. Second, it introduces a hover over effect to let the user know the element is active.

Summary

That is it! Once you have your CSS deployed, then adding emphasis to an anchor becomes super simple. Simple add the anchor as usual, and then assign it one of the classes for styling.