Faking a Graphical Link

By: Chris Beasley, Published: 2003-05-05, Parent Categories: Search Engine Optimization, CSS

Method 2: Graphic-Less "Graphical" Link

You can make a "graphical" link without graphics at all if you use a little CSS trick and manipulate the border of a block.

You see typical beveling of an object, making an object seem to stand out, is accomplished by applying highlights and shadows at the edges. For instance you would add highlights to the top and left edges and shadows to the bottom and right edges to make it seem like light was shining down on the object from above and to the left. The end result is that the object looks somewhat 3D.

You can get this same effect, albeit on a much more primitive scale, by simply adjusting the borders of something on a mouse-over.

Check out this CSS: 

	  a.menu{
		color:#ffffff;
		font-family:verdana;
		font-size:11px; 
		font-weight:bold;
		text-decoration:none;
		line-height: 30px;
		width:120px;
		height:30px;
		position:absolute;
		background-color: cbcbcb;
		text-align: center;
		border-top: 3px solid #ffffff;
		border-left: 3px solid #ffffff;
		border-right: 3px solid #000000;
		border-bottom: 3px solid #000000;
	}
	a.menu:hover {
		color:#000000;
		border-top: 3px solid #000000;
		border-left: 3px solid #000000;
		border-right: 3px solid #ffffff;
		border-bottom: 3px solid #ffffff;
	}

You notice that all we're doing is swapping the border colors on a hover. The end result is that we have buttons that look like images, without using images at all.

Method 2 Continued»
« Method 1 Continued