CSS Link Boxes

A simple way to add bold, bright links to your header, sidebar or post text is with CSS. No need for Photoshop, creating images and matching text to your site. Just follow this tutorial…

First, add a bit of code to your stylesheet for each color:

.red {
float: left;
display: block;
clear: both;
margin-bottom: 10px;
padding: 5px 10px;
font-size: 16px;
color: #fff;
background: #fc2c20;

.red a {
color: #fff;

Float: Tells the text to align to the left or right

Display: The element is displayed as a block-level element (like paragraphs and headers)

Clear: No other elements are allowed on the left or the right side of the box

Margin: Creates a space 10px high between the boxes

Padding: Creates space inside the box around the words – there will be 5px on the top & bottom and 10px to the right & left. You could also just put 10px which would make the padding the same on all sides or if you wanted each side to be different, it would be something like 5px 8px 10px 5px (top, right, bottom, left)

Color: Makes the words white

Background: Fills the box with a color (find color codes here)

Red a: Tells the link to stay white instead of using the link color from the rest of the site

If you want all the boxes to be the same length add width: 200px;

And if you’d like them to change color on a mouseover add this:

.red a:hover {
background: #000;

Next, find your links (header, sidebar, page, etc.) and add this:

<div class=”red”><a href=”http://socialmediadownloads.com/about.html”>About</a></div>

<div class=”green”><a href=”http://socialmediadownloads.com/hireme.html”>Hire Me</a></div>

<div class=”teal”><a href=”http://socialmediadownloads.com/tutorials.html”>Tutorials</a></div>


Post a Comment