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.
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.
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
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
- the links in this demo are using the css class "button"
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 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>
The link button works in almost the exact same manner.
Text="Smack me" ImageUrl="~/Images/sport_soccer.png" />
<span><img src="Images/sport_soccer.png" style="border-width:0px;"/>
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.
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