Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

December 11, 2009

ASP.NET: Buttons

Filed under: ASP.NET,C#,VB.NET @ 5:27 pm

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:

image

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:

image

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? :-)

image

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

image

Facebook? It just has square buttons:

image

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.)

image

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

Enjoy!

3 Comments

  1.   Ganesh Ranganathan — December 13, 2009 @ 3:18 pm    Reply

    I think Mozilla supports rounding of corners while IE doesnt (its through some propreitary CSS tag).

    The only way of button styling i use is an image background with on mouseover image switching through javascript.

  2.   Troopers — December 29, 2009 @ 3:50 am    Reply

    I think HTML5 support rounding of corners and gradient color… to check!

  3.   Zakee — October 20, 2011 @ 5:49 am    Reply

    good article

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2014 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs