YUI Style Glowing Buttons with the AjaxControlToolkit GlowButtonExtender Control

YUI Style Glowing Buttons with the AjaxControlToolkit GlowButtonExtender Control

YUI recently added another button type to their control library - they call it the Glowing Button Control.  The Glowing Button Control allows you to add a glossy, glass like effect to your buttons along with a glowing background.  The YUI documentation says the inspiration for the design came from the Aqua buttons found in Mac OS X.  Below is a progression of screen shots that try to show the glowing effect, but you should really check out their demo page to get the full effect.

A project I am working on could use something like this to liven up a few of our screens.  We are prototyping a new design for our landing screen and of course we want it to be as sexy as possible.  The purpose of the landing screen is to let the user know about what our product is about and have them sign up for our services by creating an account.  I was thinking about jazzing up the 'Sign Up Now!' button by adding this glowing effect.  So I looked into how the YUI applied the glossy glow and ported the solution into an AjaxControlToolkit control.

The glowing button in the YUI demo glows continuously.  I am not sure if that will be too distracting or not - so I implemented three different types of glowing modes to my extender control ...

• Continuous: Just like YUI, it always glows
• Interval: The glow runs on a predefined interval.  In my demo page, some of the buttons are configured to glow every 5 seconds.  I am not sure if 5 seconds is still too short, but the idea was that every so often the pulsing of the button will draw the users attention to the Sign Up Now! button 
• Hover: The glow is applied as you mouse over the button.  

Also, we aren't wanting to turn away any visitors, so I also wanted to make sure the glowing worked well in IE6, IE7, Opera and FF.

Live Demo (Opera 9, FF, IE6 and IE7) | Download

How the YUI Glow Button Control Works

There are 3 pieces to YUI's Glow Button Control.  Markup for the button, an image that provides the glassy look and an animation that gradually changes the background color of the button from a dark blue (#016bbd) to a light blue (#b1ddff) and then back again to dark.

The Markup

The markup YUI button is a button element embedded within two SPANs.  The button's color, border and margin are cleared using YUI's CSS core button stylesheet and the outer two SPANs are used to apply the look of a rounded border.  

<span class="yui-button">
    <span class="first-child">
        <button>Ok</button>
    </span>
</span>

The Glossy Image

A transparent image is used to make the button appear glossy.  The image is 1 single pixel wide and 100 pixels tall.  The opacity of the top 50 pixels are lighter than the opacity of the bottom 50 pixels.  Because the image is transparent, the background color of our button is displayed, but due to the opacity the color appears lighter on the top and darker on the bottom.  The nice part about this technique is that the same image can be used with any background color.

I think I will probably find other uses for this glossy image outside of the glowing button extender.  Most of the projects I work on make heavy use of data grids (I am sure you could have guessed this from all of the entries I write about the GridView and ListView controls).  I almost always have a title bar for my data grids that appear over the top of the grid.  You can use this image to apply a nice glossy effect to these title bars as well.  Below are a couple of samples showing how this can be done.  The same image is used for the background of both elements. 

Markup ...

and the CSS ...

The Animation

Next, YUI's animation framework is used to change the background color giving it the glowing effect.  For the demo on YUI's page, the background color of the element transitions between #b1ddff and #016bbd.  Both are shades of blue and the gradual moving between the two colors provides the illusion the button is glowing.

The GlowButtonExtender

After I understood how the YUI control worked, I downloaded their glossy image and started building a new AjaxControlToolkit extender control that would apply glowing effects to a regular asp:Button control.  I used the AjaxControlToolkit Animation Framework to change the background color of the button.  When the JavaScript behavior for my extender loads, I setup 2 different ColorAnimation instances.  One that transitions the background color from dark to light and the other back from light to dark.  Like I mentioned previously, I also wanted to support 3 different glowing modes: Continuous, Interval and Hover.  If the glowing mode is set to Continuous, these animations run continuously.  If the mode is set to Interval, the animations run then take a short break (specified by the value of the Interval attribute) before running again.  Finally, when the mode is set to Hover, I run the animations when the user mouses over the button.

The demo page for this post contains uses for all 3 modes of the GlowButtonExtender.  The markup for all three are virtually identical, except for the value of the Mode attribute.  Below is the markup for the continuous glowing effect.

The extender control itself is very similar to the others I have created.  The GlowButtonExtender class defines a bunch of properties that can be set when configuring the control.  Most of the logic for the control is handled by the client side JavaScript behavior.  When the behavior loads, I have a bit of code that setups the animations I want to run for changing the background color and for working around a couple of browser specific quirks.  Other than that, there really isn't too much to it.

Conclusion

I am not sure if we will actually use the GlowButtonExtender for our landing page - the jury is still out on if the glowing effect is annoying or cool.  But I do think there are a couple of techniques I learned from the YUI Glow Button that have some promise. 

• I like using the same image file for applying the glossy backgrounds to my UI elements.  Not all projects have budget for a graphic designer and this is an easy and inexpensive way to make your screens a little bit more appealing.  I think I might play around with different opacity settings for both the top and bottom portions of the image and see how changing these values effects how it looks. 
• I liked the promise of the GlowButtonExtender's Hover effect and I could see using this in other places besides just on buttons - Links, Tabs and pretty much any other place where I have used custom mouseover or hover effect.  I think I will explore this in the future.

That's it.  Enjoy!

(P.S. - I have a bit of a vacation coming up, and I am not sure if this is my last post before I leave or not.  Either way, I will be back in the second half of February.)