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
