jump to navigation

Create custom, professional buttons with .Net LinkButton and CSS August 22, 2007

Posted by codinglifestyle in ASP.NET.
Tags: , ,
trackback

 

 

 

 

Anyone who has played with one of Microsoft’s web starter kits will have noticed the graphic designers who created them use an image for each and every damned button on the site.  Not only that, but they create the same button for each .NET theme.  I don’t know about you, but the prospect of opening Photoshop every time I add a button to a site is too much work.  At the same time, you can’t argue they don’t give the site a slick, professional look.

 

What would be really ideal is to have one blank button image and use a standard control and CSS to get the same effect.  After playing with the various button types you see that the standard .NET button doesn’t support background-image, but LinkButton does.  In fact, LinkButton is almost perfect once you set the display: inline-block so it pays attention to the width and height.  Because LinkButton renders as a hyperlink, the text color and text-decoration are ignored until we add the visited, hover, and active elements.  Finally, we get LinkButton to behave consistently.

 

.button, .button:visited, .button:hover, .button:active

 {

       width: 140px;                                    /*Make these the size of the image*/

       height: 18px;

       background-image: url(images/button-blank.gif);  /*Blank button image*/

       background-repeat: no-repeat;

       color: Navy;                                     /*Color of text*/

       display: inline-block;                           /*Required*/

       margin-left: 5px;                                /*Spacing so buttons can…*/

       margin-right: 5px;                               /*simply be side-by-side*/

       text-align: center;                              /*Alignment of text*/

       padding-top:5px;                                 /*Push text down like v-align:center*/

       text-decoration:none;                            /*Do not show link underline*/

}

 

 

Of course, you could break out this style to have the button look different depending on its state.

 

Now we can simply drop a LinkButton on the page and set the CssClass to button. 

 

Enjoy the ease of creating a professional look with the humble LinkButton control.

Advertisements

Comments»

1. jews - August 28, 2007

thanks for the post, i’ll try it out


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: