Graphic Design shadow to enhance presentation of images.
Graphic Design shadow to enhance presentation of images.

Web Design - Tips, Tricks and Programmng

Creating Interesting Page Links

Return to Forum Home Page

Forum

Return to Topic

Return to Topic

Login to Forum

Login to Forum

Register to access Forum

Register to access Forum

Previous Thread Return to Topic Next Thread
Author Message

17 Designs

17 Designs

Date Joined:
Jan 19, 2010

Posts:
66

Posted: Fri Sep 9, 2011 10:44 AM

Subject: Creating Interesting Page Links

As web developers, we are always thinking about new ways to enhance hypertext links. We came up with an excellent solution for placing boxes around a link. You may have seen this effect on other websites. The hover state shown below demonstrates placing a 1 pixel border around a link. The additional padding was added to keep the box square reducing a crowding effect. The active state shown below demonstrates placing a solid background behind the link. The colour we selected was dark and we inverted the text colour to white making it stand out.

a.blog-link:link {
color: #0c73d3;
font-weight: normal;
text-decoration: underline;
padding: 0 3px 0 3px;
}
a.blog-link:visited {
color: #17468c;
font-weight: normal;;
text-decoration: underline;
padding: 0 3px 0 3px;
}
a.blog-link:hover {
color: #5db402;
font-weight: normal;
text-decoration: underline;
border: 1px solid #5db402;
padding: 0 3px 0 3px;
}
a.blog-link:active {
color: #fff;
background: #5db402;
font-weight: normal;
text-decoration: none;
padding: 0 3px 0 3px;
}

This example will be featured on a BLOG for the Distress Centre Oakville due to be launch in Fall/2011.

The link will be www.distresscentreoakville.com.

Return to Forum Home Page

Forum

Return to Topic

Return to Topic

Login to Forum

Login to Forum

Register to access Forum

Register to access Forum