Thursday, July 05, 2012

Turn Links into Buttons with CSS

CSS Tags Decorate Stuff!

Using CSS you can turn dull links into attractive buttons. Let me show you how!

What an average link looks like...

Average link
Average link

What a link could look like...

Button link

By using CSS I am able to decorate the anchor tag! Before CSS buttons on websites were text in images between the anchor tags.

THIS WAS BAD. Loading images takes a significant amount of time, much more than the average visitor was willing to spend watching the page load. CSS is a way of decorating text based on selectors and classes which describe the style needed.

Thanks to CSS you don't have to compromise looks for speed. Take a look at some more examples of how CSS can decorate links to appear as buttons.

Don't Have the Time to learn CSS?

Although learning CSS would be ideal, there are many programs and websites that host programs to help you create buttons visually. The CSS for the buttons will be printed out to you once you reached a design you like! Try a CSS button creator now!

What a link could look like...

Button link 2

Button link 2 

The Parts of a CSS Button

  • a:link - How non-visited links would appear.
  • a:visited - How visited links would appear.
  • a:hover - How links appear while the mouse hovers over them.
  • a:active - How links appear while they are clicking.

No comments: