Cool buttons in ASP.NET

2 min read
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]
This website uses cookies. By continuing to browse the site you are agreeing to our privacy policy.By closing this banner or clicking on any other item of this page, you agree to the use of such cookies.