SexyHyperLink and SexyLinkButton AspNet Server Controls

• Download DemoCode.zip - 15.3 KB

Introduction

This tutorial will show you how you can make your HyperLink's and LinkButton's into SexyHyperLink's and SexyLinkButton's. Making text based css buttons, with an alternate pressed state and also using and freely available icons. No javascript required. These dynamic buttons will save you heaps of time.

Here's an example of what you can expect when using these controls. Both your hyperlinks and your linkbuttons can look exactly the same. At the top is their normal state and below is what they look like when they're clicked.

Background

In my spare time I run an open source project (SharpForge) which currently has all standard text hyperlink and linkbuttons. There have been quite a few requests to make it look and feel more attractive. While researching I discovered the tutorial by Oscar and found that making the css buttons was quite easy. The silk icons were also recommended so I tried combining the two. It looked really cool so I set about creating reusable server controls.

This solution takes what is provided by Oscar Alexandar's how to make sexy buttons with css and the silky icons provided for free at FAMFAMFAM and wraps the HyperLink and LinkButton controls into easy to use server controls.

Sexy CSS

I'm not going to go into the detail of the CSS since that's explained very well in Oscars tutorial. The points to note are:

• it uses a technique called sliding doors which involves two images. This technique allows the button to stretch horizontally
• the two states(clicked and not clicked) of the button are on each of the images. When the button is clicked the images are moved vertically to show the alternate state. No javascript is required for this.
• the links in this demo are using the css class "button"
  

Silky Icons

There are loads of cool free icons at FAMFAMFAM that you can download and use with this control right now. View all of the Silk icons here.

SexyHyperLink

Armed with a working example of how to achieve the sexy buttons, making them into a server control was quite straight forward. The SexyHyperLink simply wraps the normal hyperlink with a span and the icon. Therefore the tag....

<SF:SexyHyperLink runat="server" Text="Sexy asp.net button tutorial"
    ImageUrl="~/Images/information.png" cssclass="button" NavigateUrl="~" />

Outputs the following html...

<a href="./" class="button"><span><img src="Images/information.png"
    style="border-width:0px;" /> Sexy asp.net button tutorial</span></a>

SexyLinkButton

The link button works in almost the exact same manner.

<SF:SexyLinkButton runat="server"
           Text="Smack me" ImageUrl="~/Images/sport_soccer.png" />

Renders...

<a href="javascript:__doPostBack('ctl06','')">
       <span><img src="Images/sport_soccer.png" style="border-width:0px;"/>
       Smack me</span></a>

Each of the controls inherits HyperLink and LinkButton and the only additional properties are ImageUrl and Icon for accessing the icon image. Setting the CssClass is important because it associates our control with the style sheet configuration. I haven't displayed the rendering code for the server controls because it's very straight forward, you can see it in the app_code folder.

And that is it. They're not complicated so now there's no excuses for ugly buttons.

About SharpForge

SharpForge is a C# / Asp.Net 2.0 / Subversion open source project management web application. It's goal is to provide SourceForge or Codeplex like project hosting functionality for everyone and anyone..... and in the next release it will have some shiny new buttons :)

Updates

• 24th August - the images move vertically when the button is pressed not horizontally