Deborah's Developer MindScape

Creating nice looking buttons for ASP.NET is still in the category of "I can’t believe it is STILL this hard".

As more and more normal people use great looking Web sites, Silverlight apps and even their IPhones, they experience some really nice user interfaces. I’d like to do those things in my Web application as well. I don’t want my Web pages looking like VB3 gray looking Windows forms.

So I got to the point where I needed a Login button on my form. Hmmm. How do I build a nice looking button in ASP.NET?

After extensive research, work with Bing, and some trial and error, I came to these choices:

As you could tell, I am going with a Red/White color scheme for the Web application, you could pick other colors.

The ASP.NET source code I used to display this list of buttons is as follows:

In HTML:

<!– Normal buttons–>
<asp:Button ID="Button1" runat="server"
    Text="Button1" /><asp:Label runat="server" Text=" <- Standard Button" /><br /><br />
<asp:Button ID="Button10" runat="server"
    Text="Button1" forecolor="#7C1810"/><asp:Label runat="server" Text=" <- Standard Button with Colored Text" /><br /><br />
<asp:Button ID="Button11" runat="server"
    Text="Button1" forecolor="#7C1810" BorderColor="#7C1810"/><asp:Label runat="server" Text=" <- Standard Button with Border" /><br /><br />

The first set of buttons are standard ASP.NET buttons. Notice the following:

• The simple standard button looks a standard WinForms button and is not very exciting. It does, however, have a built in roll-over effect that you can see if you put one in your code.
• Adding a font color adds a little something while still retaining the built in roll-over effect.
• As soon as you add a border to the button, the button becomes more square and flat, and you lose the roll-over effect.

In HTML:

<asp:Button ID="Button2" runat="server"
    Text="Button1" BackColor="#B92217" ForeColor="White"/><asp:Label runat="server" Text=" <- Standard Button with Backcolor" /><br /><br />
<asp:Button ID="Button3" runat="server"
    Text="Button1" BackColor="#B92217" ForeColor="White"
    BorderStyle="Groove" />  <asp:Label runat="server" Text=" <- Standard Button with Backcolor and Groove" /><br /><br />
<asp:Button ID="Button5" runat="server"
    Text="Button1" BackColor="#B92217" ForeColor="White"
    BorderStyle="Inset" />  <asp:Label runat="server" Text=" <- Standard Button with Backcolor and Inset" /><br /><br />
<asp:Button ID="Button6" runat="server"
    Text="Button1" BackColor="#B92217" ForeColor="White"
    BorderStyle="Outset" /> <asp:Label runat="server"  Text=" <- Standard Button with Backcolor and Outset" /><br /><br />

The above set of buttons are standard ASP.NET buttons with a background color set. Notice the following:

• They each have different border style properties.
• In all of these cases, the buttons are more square and you lose the roll-over effect.

In HTML:

<!– Normal buttons with Border color –>
<asp:Button ID="Button7" runat="server"
    Text="Button1" BackColor="#B92217" ForeColor="White"
    BorderColor="#7C1810" BorderStyle="Groove" />
    <asp:Label runat="server"  
  Text=" <- Standard Button with Backcolor, Border and Groove" /><br /><br />
<asp:Button ID="Button8" runat="server"
    Text="Button1" BackColor="#B92217" ForeColor="White"
    BorderColor="#7C1810"  BorderStyle="Inset" /> <asp:Label runat="server"  Text=" <- Standard Button with Backcolor, Border and Inset" /><br /><br />
<asp:Button ID="Button9" runat="server"
    Text="Button1" BackColor="#B92217" ForeColor="White"
    BorderColor="#7C1810" BorderStyle="Outset" /> <asp:Label runat="server"  Text=" <- Standard Button with Backcolor, Border and Outset" /><br /><br />

The above set of buttons are standard ASP.NET buttons with a border. Notice the following:

• They each have different border style properties.
• In all of these cases, the buttons are more square and you lose the roll-over effect.
• With the border, the button also becomes more flat looking.

In HTML:

<!– Image Buttons –>
<asp:ImageButton ID="ImageButton1" runat="server"
    ImageUrl="Images/RedButton.jpg" width="65" height="20" BorderColor="Black"/><asp:Label runat="server" Text=" <- Image Button (with Silverlight image)" /><br /><br />
<asp:ImageButton ID="ImageButton2" runat="server"
    ImageUrl="Images/Gradient2.jpg" width="65" height="20"
    style="background-repeat: repeat-x" BorderColor="Black"/><asp:Label runat="server" Text=" <- Image Button with Gradient" /><br /><br />

The above set of buttons are ASP.NET image buttons. Notice the following:

• The first button looks nice, but because it is an image, it has no effects.
• I built this button in Silverlight, took a screen shot of it using SnagIt, and saved it as an image file.
• To give it a roll-over effect I would need to do a second screen shot with the roll-over effect on and then replace the original image with this image as the user hovers over it.
• If you want to use images in this manner, you would have to build one for every set of text.
• If you are localizing the application, that means a new button image file for every set of text for every language.
• OR, you could do an image without text and use CSS styles to write text over the image.
• The second button does not quite look like a button.
• It uses a gradient image and the background-repeat set to repeat it through the button.
• You would need to use CSS styles to write text over the image.

Another option along the lines of using images, is to use separate images for the pieces of the button: One for the upper left corner, one for the top, one for the upper right corner, and so on. That way you can have rounded corner images that can expand to the size of your text. To manage the set of image pieces and get the text on the image, create a custom control. There are instructions for creating a custom control for this purpose in the article: "Dynamically Expandable Rounded Cornered Button".

In HTML:

<!– Rounded Panel –>
<asp:Panel ID="Panel1" runat="server" BackColor="#B92217"
    Width="68" height="15">
    <asp:Button ID="InsideButton" runat="server"
        BackColor="#B92217" Text="Button1" 
        BorderStyle="None" ForeColor="White"/>
</asp:Panel>
<asp:Label runat="server" Text=" ^- Standard Button inside Rounded Panel" /><br />
<asp:RoundedCornersExtender ID="RoundedCornersExtender3" runat="server"
    BorderColor="#7C1810" Corners="All" Radius="6"
    TargetControlID="Panel1">
</asp:RoundedCornersExtender>

<asp:Panel ID="Panel2" runat="server"
    BackImageUrl="Images/Gradient2.jpg"
    Width="68" height="15">
    <asp:Button ID="Button4" runat="server"
        BackColor="#B92217" Text="Button1" 
        BorderStyle="None" ForeColor="White"/>
</asp:Panel>
<asp:Label runat="server" Text="^- Standard Button inside Rounded Panel with Background Image" /><br />
<asp:RoundedCornersExtender ID="RoundedCornersExtender4" runat="server"
    Corners="All" Radius="6"
    TargetControlID="Panel2">
</asp:RoundedCornersExtender>

This last set of buttons are in rounded panels. Notice the following:

• The panels define the background color.
• The RoundedCornersExtender control (part of the Ajax Toolkit) rounds the corners of the panel.
  NOTE: You cannot use the RoundedCornersExtender to simply round the corners of the button. But that would be nice, won’t it?
• The buttons in the panel have the same background color and no border so it appears as if they are rounded instead of being within a rounded container.
• If the user does click on an edge of the button outside of the actual button itself, the click event won’t occur.
• The second button has an image background. Notice that the corners are then no longer rounded. Also, unless the image in the button exactly matches the image in the panel, you can see the button within the panel.
• This basically means that you won’t be able to have a rounded corner button and a image (like a gradient image) background using this technique.

So no good options here. 🙁

The good news is … I am not alone.

Look at the buttons that Twitter uses. It looks like the standard HTML button to me:

Amazon has nice buttons. No! Wait! Look more closely and you’ll see they are not buttons at all. They are graphics with href links on them! Notice the underline under Cart (I had my mouse over it). Is that cheating? 🙂

And this one from Amazon is just an image with no roll-over or click effect.

Facebook? It just has square buttons:

Blizzard, maker of World of Warcraft (WOW), on the other hand has really nice buttons. Anyone know how they did it? (Looking at the View Source, it appears to be done by CSS.)

If you know of other choices, I’d love to hear about them.

Enjoy!

My first Xaml/Silverlight post was on gradients, it seems only right that my first ASP.NET post should cover the same topic.

I started Web development in the 90’s using VB 5/6 and classic ASP and learned all about HTML, CSS, Javascript, DOM, XML, XSL, and all of the other related technologies. This lead to writing a book: "Doing Web Development: Client-Side Techniques" back in 2002 that provides an introduction to those technologies including HTML, CSS, JavaScript, and XML.

When .NET came out, I jumped over to ASP.NET, enjoying its power but struggling with its quirks.

I then got busy with WinForms and Silverlight development and ignored much of ASP.NET for the past few years. I just got back to it this week and was excited to see what has changed. Amazingly, not that much. I am surprised how many quirky things are still there.

Which brings us back to the topic at hand. 10+ years ago we achieved gradient backgrounds on our Web pages using a pencil thin gradient graphic repeated across the screen. Today, we achieve gradient backgrounds on our Web pages using a pencil thin gradient graphic repeated across the screen.

Funny, many of the forum posts on this topic these days say "use Silverlight instead", like that is something we can just decide to do. Well, maybe you can, but as a consultant I certainly can’t. And if you work in a corporate environment, I bet you can’t either.

So, here is the tried and true way to get a gradient background for your pages.

1) Create/buy/borrow an image file (such as a .jpg file) that contains a very thin sliver of the desired gradient.

My image file looks like this:

Yes, that is a little hard to see. But it is basically a very thin gradient line going from Red to White.

I found an online tool to help create this image file: SecretGeek’s Gradien-Maker. It looks a little loud when you first access the page, but it allows you to easily create a gradient. You can get the gradient just like you want it, then Save Background As to generate the image file with a pencil thin piece of the gradient. It worked great.

NOTE: This does not allow for setting specific gradient stops or for anything but a linear gradient, but it works for simple vertical or horizontal gradients.

2) Define the style

Define the style in a cascading stylesheet (CSS) like this:

In CSS:

.GradientBackground
{
    background-image: url(Images/Gradient2.jpg);
    background-repeat: repeat-x;
}

[If you are not familiar with HTML or CSS, see the above referenced book.]

This sets the URL of the background image to my gradient image file. It then sets it to repeat across the x-axis. This causes the sliver to be repeating horizontally across the page.

3) Set the new style on the desired HTML element in the ASP.NET page.

I added it to the Body element as follows:

In HTML:

<body class="GradientBackground">

OR

You can forget about step #2 and put the style directly in the ASP.NET page:

In HTML:

<body style="background-image: url(Images/Gradient2.jpg);background-repeat: repeat-x;">

In either case, the result is something like this:

You can make the gradient longer or shorter by creating a new gradient image file with a different size. Or you can use a similar technique to create a horizontal gradient repeated vertically across the page.

Until we are all doing Silverlight or ASP.NET comes out with gradient features on its controls, this is the best technique I’ve found to put gradients on Web pages.

Enjoy!