Last night I did a search on 'Cool CSS buttons', to find a technique that would allow me to code buttons that I can change in CSS later if I need too. This particular site has been around for a while, it's nice to be able to give it a face lift every year or so to keep interest. So... I landed on http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx and found exactly what I was looking for. His technique was intended for <a> tags, but lends itself nicely to my mileau which is ASP.NET coding.
This tag:
</asp:LinkButton ID="lnk" runat="server" Text="<span>linkbutton</span>" CssClass="button">
Gets marked up by this css:
/* css for buttons */
a.button {
/* Sliding right image */
background: transparent url('../images/button_right.jpg') no-repeat scroll top right;
display: block;
float: left;
height: 35px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
margin-right: 6px;
padding-right: 16px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
/* FONT PROPERTIES */
text-decoration: none;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
a.button span {
/* Background left image */
background: transparent url('../images/button_left.jpg') no-repeat;
display: block;
line-height: 21px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
padding: 7px 0 5px 18px;
}
a.button:hover span{
text-decoration:underline;
}
and the end result is a really nice looking button. You'll want to look at Janco's blog entry for the images that you'll need and for a full explanation. I'm disappointed that I couldn't get the RSS subscription to that site to work... I need it to hook up in Outlook 2007. Maybe someone else can help me with that?