Cool buttons in ASP.NET

2 minuti di lettura
Cool buttons in ASP.NET
There are many ways to make nice buttons in HTML, one is to use CSS with classic <a> tags.
In asp.net you can use LinkButton but you have to create a new control to change the final HTML and insert a <span> before the text to add the on click press effect. Here is a way to do it:
[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace myNamespace
{
[ToolboxData("<{0}:SpanLinkButton runat=server>")]
public class SpanLinkButton : System.Web.UI.WebControls.LinkButton
{

protected override void Render(HtmlTextWriter writer)
{
this.Text = String.Concat("<span> </span>", this.Text);
base.Render(writer);
}
}

}[/csharp]

Now with css style you can choose how your buttons look like. We use 3 images for the hover and press effect in this example :

Cool buttons in ASP.NET



[css]a.button
{
background: transparent url('btns-up.png') no-repeat scroll top right;
display: block;
float: left;
height: 27px;
margin-right: 6px;
padding-right: 18px;
padding-top: 6px;
color: #000000;
text-decoration:none;
}
a.button:hover {
background: transparent url('btns-hover.png') no-repeat scroll top right;
}
a.button:active {
background: transparent url('btns-down.png') no-repeat scroll top right;
outline: none;
padding-top: 7px;
}

a.button span
{
background: transparent url('btns-up.png') no-repeat;
display: block;
padding-left: 18px;
margin-top:-6px;
height: 27px;
float:left;
}
a.button:hover span {
background: transparent url('btns-hover.png') no-repeat;
}
a.button:active span {
background: transparent url('btns-down.png') no-repeat;
margin-top:-7px;
}[/css]