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.

      image imageimageimageimage

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

image

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. 

image

Markup ...

image

and the CSS ...

image

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.

image 

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


TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/103

Listed below are links to weblogs that reference YUI Style Glowing Buttons with the AjaxControlToolkit GlowButtonExtender Control:

» 推荐文章 from 曹振华
1.BuildingaSimpleBlogEnginewithASP.NETMVCandLINQ-Part1 2.ClientHistoryPointsinASP.N... [Read More]

Comments


Posted by: Carlos on January 27, 2008 12:00 AM

Cool :D

Posted by: Alex Boesel on January 27, 2008 12:00 AM

Still haunted by blinking HTML text, I think I like the hovered glowing the most. Either way, it is a great effect!

@Alex -

I am with you Alex. I thought the hover effect turned out the best.

Matt.

Posted by: Vish on January 27, 2008 12:00 AM

Hi Matt,

Only one word, awesome...

:)

Posted by: Mitch on January 28, 2008 12:00 AM

Looks great! Im with you on the designer budget bit, which is what makes this control so attractive.

My preference is the hover effect ;) but thats just me.

Have fun in your vacation.

Nice work, Matt! Its nice to see that you put the effort into making the transparency effect still work in IE6. I think that this is a pretty intelligent animation, gradually changing the background color and letting the PNG do the rest. That makes it so efficient and smooth-running, even on the weakest machine with the slowest internet connection. That should really helps minimize the annoyance potential.

Have a great vacation!

Posted by: Bryan Helms on January 28, 2008 12:00 AM

Great work, Matt! I really enjoy all of your posts.

I did notice a slight problem with the hover buttons, though. It looks like the hover animation is firing twice, once when you mouse over the border, and once on the button area itself.

If you move your mouse quickly over the buttons, there doesnt seem to be an issue. However, if you move your mouse slower, the button will lose its glow and then start glowing again.

To reproduce it, move your mouse to the middle of the button. Then, move slowly towards one of the edges. Once you hit the very edge of the border (and the pointer changes back to the standard pointer), the button will "go dark" and then start to glow again.

If you made that happen, now move slowly from button to button. You should see some blinking going on. This is where its most noticeable.

FYI, Im using IE6 to view the page.

Have a nice vacation! Hopefully I didnt just ruin it :)

Posted by: Barbara on January 28, 2008 12:00 AM

Excellent done, Matt!

Have a wonderful vacation!

@Josh -

Thanks Josh. It was a bit more painful making the graphic transparent in IE6, but like I mentioned, for this project its a requirement.

Matt.

@Bryan -

Nice catch. And thanks for the clear steps to reproduce the problem. I gotta be honest, my least favorite comments are the ones like: it doesnt work with master pages or doesnt work in ie6. Hopefully I will have time to fix this when I get back.

Matt.

Barbara -

Thanks, it has been a long time coming ...

Matt.

Posted by: Brian on January 29, 2008 12:00 AM

Excellent, what are the chances of getting a .NET 2.0 version?

@Brian -

I think the chances are pretty good ... I dont believe I used any .Net 3.5 features.

I will see if I cant find a few minutes and create a .Net 2.0 version as well.

Matt.

Your character is described: Strong?
Hope that you all example, having renewal blog every day, especially, AJAX charges piece of expansion , haw-haw , I am a Chinese boy

Thanks for your article ~

Posted by: Mike on February 6, 2008 12:00 AM

Nice post. What I like best is the implementation. Some of your ideas are difficult to reuse, but an extender control only needs to be made once, and then you can reuse it across multiple projects.

Some of your solutions involve eventhandlers in the code behind, which soon turns into a copy-paste ordeal if you want to use it in more than one page or project.

Thanks!

Looks awesome. Unfortunately it does not work in Safari on Mac or on Windows. Maybe an Ajax issue? The Yahoo version seems to be working.

Another great Post! Thanks Matt. One problem, the control completely degrades in Safari on the Mac (at least in your demo). to the point of being broken. Im going to see if I cant fix it.

Posted by: ReTox on February 7, 2008 12:00 AM

Doesnt work in Opera 9.25

Posted by: Paul R on February 7, 2008 12:00 AM

Any chance of making this Safari compatible? Im interested in using this but a small percentage of our users are Mac-based.

Very interesting one!!

Posted by: John B. on February 8, 2008 12:00 AM

Maybe its just me, but...the demo doesnt seem to work in Safari (at least no 3.0 on the Mac), while the YUI one does.

Posted by: Darren on February 25, 2008 12:00 AM

To make it work in Safari, edit the GlowButtonBehavior.js file. Find the line if(Sys.Browser.agent == Sys.Browser.Opera) and replace it with if(Sys.Browser.agent == Sys.Browser.Opera || Sys.Browser.agent == Sys.Browser.Safari). At least it works with safari on windows.

Great one!
I would be nice if you could make one with support fr .Net 2.0 :)

Posted by: Steve on March 12, 2008 12:00 AM

While it looks great the demo page takes awhile to load. After viewing the source there seems to be heaps of javascript files. What is the total size of all files needed for this demo?

Posted by: Nitin on March 27, 2008 12:00 AM

Hi,
Is there anyway we can use this glowing button extender with the new version(3.0) of Ajaxcontrol toolkit?
Thanks.

Posted by: Anonymous on April 9, 2008 12:00 AM

Hi,

It is really a great job! I like it.

However, I have a question that when I reference to your .dll in my application on the dev machine. Everything works great. Except, that went I scroll the page up and down the text in the buttons dont show up till I move the mouse on top of them. They then show up.
Is there anything that I am missing here to cause the slow in responding?

Aslo. When I moved the application to TEST server with the .dll. The page doesnot display. It just give me a blabk page. I set it up on the debugger. Everything in the code runs perfect.

Any ideas?

Thanks.

Posted by: Jim Lizzi on April 28, 2008 12:00 AM

Has a 2.0 version been created, or does anyone have any suggestions on how to achieve this effect in 2.0? Thanks!

Posted by: nathan on June 16, 2008 12:00 AM

Was an asp.net 2.0 version created ? I love this effect but am restricted to 2.0 (I tried using this version but it must be using 3.5 somewhere)

Posted by: Nuwan on August 23, 2008 11:04 PM

Hi Matt,

The control works really great. Is it free for use? Are there any license/copyright terms?

Thanks!
/Nuwan

Posted by: abhishek on September 18, 2008 03:10 PM

How to get YUI control for visual studio 2005??????

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • abhishek wrote: How to get YUI control for visual studio 2005??????...
  • Nuwan wrote: Hi Matt, The control works really great. Is it free for use? Are there any license/copyright term...
  • nathan wrote: Was an asp.net 2.0 version created ? I love this effect but am restricted to 2.0 (I tried using this...
  • Jim Lizzi wrote: Has a 2.0 version been created, or does anyone have any suggestions on how to achieve this effect i...
  • Anonymous wrote: Hi, It is really a great job! I like it. However, I have a question that when I reference to yo...
  • Nitin wrote: Hi, Is there anyway we can use this glowing button extender with the new version(3.0) of Ajaxcontrol...
  • Steve wrote: While it looks great the demo page takes awhile to load. After viewing the source there seems to be ...
  • SilverSoft wrote: Great one! I would be nice if you could make one with support fr .Net 2.0 :) ...