featured computer 850

HTML: Links as Buttons – Simple CSS

Share page:

Summary

With the widespread use of hand-held devices used to browse the Internet, it has become more important to make links that are large enough to be touched by hand, not just clicked with a pointer. I searched around a while and am satisfied with this simple solution using CSS without relying on the “button” or “form” tags. NOTE: You don’t see them on my site as of this posting because I am redoing my whole site to be more touch-screen friendly.

Now you have a choice. You can read the rest or watch a video created about this page by Webucator CSS Training.

Overview

The most general description I can give is that, by using CSS, I made the background color of the text grey, while making the borders of the text area either white or black, to give the illusion of a button. For me, this was MUCH easier than using the BUTTON tag, because I could use my existing link code and use an advanced text editor’s “Find and Replace” feature to replace the “<a href=” with the string “<a class=”CLASS_NAME” href=“. Below I list two types of CSS classes. One is a fixed size button and the other one will expand or shrink to fit the text within it.

The following CSS classes are text that goes in your CSS file, the “HEAD” section of your page within the “<style>” tags, or using inline HTML. I’m not going to try to explain CSS here, but the examples below will use CSS from a file method. I am repeating the referenced classes directly above the link. The “hover” addition emphasizes this is a link by underlining the text and making the background color slightly lighter. The second example shows how you can combine CSS classes to style an element.

Example 1 – Button Grows to Fit Text

.tinybutt {color:black; background-color:#D3D3D3; text-decoration:none; height:1.2em; padding:3px 6px; margin:10px 0; border-left:2px solid white; border-top:2px solid white; border-right:2px solid black; border-bottom:2px solid black;}

.tinybutt:hover  {background-color:#DFDFDF; text-decoration:underline;}

In Use:

<p><a class="tinybutt" href="/">Link to Nowhere</a></p>

Example 2 – Large Button of Fixed Size

.largebutt       {color:blue; background-color:#D3D3D3; text-decoration:none; display:inline-block; width:660px; line-height:72px; font-size:1.4em; font-weight:bold;   border-left:2px solid white; border-top:2px solid white; border-right:2px solid black; border-bottom:2px solid black;}

.textcenter      {text-align:center;}

In Use:

<p><a class="largebutt textcenter" href="/">Link to Nowhere</a></p>

I hope this helps simplify things for you and you don’t start creating FORMS when all you really want to do is style a link.

Similar Posts