Click here to Skip to main content
13,798,936 members
Click here to Skip to main content
Add your own
alternative version


48 bookmarked
Posted 22 Aug 2007

SexyHyperLink and SexyLinkButton AspNet Server Controls

, 22 Aug 2007
Rate this:
Please Sign up or sign in to vote.
Transform your HyperLink's and LinkButton's into SexyHyperLink's and SexyLinkButton's. Making text based css buttons with an alternate pressed state and freely available icons. No javascript required.


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.

Screenshot - pressedNotPressed.gif


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.


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 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 button tutorial</span></a>


The link button works in almost the exact same manner.

<SF:SexyLinkButton runat="server"
           Text="Smack me" ImageUrl="~/Images/sport_soccer.png" />
<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 :)


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


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Web Developer
Australia Australia
No Biography provided

You may also be interested in...


Comments and Discussions

QuestionUsing the word "Sexy" in code? Pin
C-codist22-Aug-07 8:51
memberC-codist22-Aug-07 8:51 
AnswerRe: Using the word "Sexy" in code? Pin
needmorebeach22-Aug-07 11:31
memberneedmorebeach22-Aug-07 11:31 
AnswerRe: Using the word "Sexy" in code? Pin
R. Giskard Reventlov23-Aug-07 5:11
professionalR. Giskard Reventlov23-Aug-07 5:11 
AnswerRe: Using the word "Sexy" in code? Pin
needmorebeach23-Aug-07 11:37
memberneedmorebeach23-Aug-07 11:37 
GeneralRe: Using the word "Sexy" in code? Pin
Michael Epner28-Aug-07 7:44
memberMichael Epner28-Aug-07 7:44 
GeneralVery Nice Pin
merlin98122-Aug-07 5:25
professionalmerlin98122-Aug-07 5:25 
GeneralUnfortunately the image links are broken Pin
juggler22-Aug-07 2:51
memberjuggler22-Aug-07 2:51 
GeneralRe: Unfortunately the image links are broken Pin
needmorebeach22-Aug-07 3:06
memberneedmorebeach22-Aug-07 3:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web05 | 2.8.181207.3 | Last Updated 22 Aug 2007
Article Copyright 2007 by needmorebeach
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid