Click here to Skip to main content
Click here to Skip to main content

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.

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.

Screenshot - pressedNotPressed.gif

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 Smile | :)


Updates

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

License

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

needmorebeach
Web Developer
Australia Australia
No Biography provided

Comments and Discussions

 
QuestionUsing the word "Sexy" in code? PinmemberT-luv22-Aug-07 7:51 
AnswerRe: Using the word "Sexy" in code? Pinmemberneedmorebeach22-Aug-07 10:31 
AnswerRe: Using the word "Sexy" in code? Pinmemberdigital man23-Aug-07 4:11 
AnswerRe: Using the word "Sexy" in code? Pinmemberneedmorebeach23-Aug-07 10:37 
GeneralRe: Using the word "Sexy" in code? PinmemberMichael Epner28-Aug-07 6:44 
GeneralVery Nice Pinmembermerlin98122-Aug-07 4:25 
GeneralUnfortunately the image links are broken Pinmemberjuggler22-Aug-07 1:51 
GeneralRe: Unfortunately the image links are broken Pinmemberneedmorebeach22-Aug-07 2:06 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 22 Aug 2007
Article Copyright 2007 by needmorebeach
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid