This article is a simple tutorial for beginners of CSS on how to style hyperlinks outside of the usual “a” class element. The most simplest CSS on stylizing hyperlinks are the simple “a:hover, a:active, a:visited” CSS calls, however there are ways to style hyperlinks in ways that makes hyperlinks look more like a button, or with a border, and more. This article covers how to initiate what I call a “a id” or “a class”.
When is a hyperlink class or ID useful?
With a hyperlink class, you can make hyperlinks look more like buttons or outside the standard hyperlink look and style. We are all used to hyperlinks having different colors, or having an underline, or the text gets bolder over mouse hover. But a hyperlink is a hyperlink and we are all used to it being a text-based link with a different color outside of the content, but with this simple tutorial, you can make any hyperlink look like a button or something unique.
This is a great method of creating something that stands out on your website, such as a call to action buttons, or a subscribe button. Web designers used to create these elements with Photoshop or Fireworks, but with a little CSS, we can create this using CSS.
border:1px solid #dcdcdc;
<a class="calltoaction" href="http://www.google.com">Get your free quote now!</a>
I personally use classes instead of ID’s for the simple reason that I can use this CSS property over and over again.
The difference between “ID” and “class” is classes are something you use over and over again throughout the site. If you were to have 3 links with this hyperlink style, you should use a class since you are using this in more than one place. ID’s are something you should use only once.
You can get creative just within this simple code as long as you know the standard CSS calls. For example you can apply background-images with this simple code.
Check out the simple example over at CSS Desk.
My name is Chris Takakura, I am an art director and visual designer servicing businesses and studios around the world. I specialize in print design, brand/identity, with a strong concentration in web design & front-end development. I am always looking to connect and be involved in creative projects, so if you are interested in my creative services, please contact me here.