home|blog|COOL BUTTONS IN ASP.NET

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:

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);
}
}

}

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 :

Buttons

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;
}
share:

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*