YUI Library Home

YUI Library Examples: Button Control: Glowing Button

Button Control: Glowing Button

This example demonstrates how to skin a Button instance to create a glossy, glass-like effect with a glowing background reminiscent of Aqua buttons found in Mac OS X.

Skinning the Button widget is done using CSS. The stylesheet used for other Button examples is a minified version of the button-core.css and button-skin.css files. When customizing the Button skin, use the raw source files as a reference.

The button-core.css file includes foundational styling that clears the default padding, margins and borders for the <button> element as wells as normalizes its display type, whereas the button-skin.css file is used to apply colors, background images, etc. Skinning can be accomplished by either overriding the styles defined in the button-skin.css file, or by creating an entirely new skin file. When overriding styles, place them in a separate file to simplify integrating with YUI updates. The follow example illustrates how to create a new style for a Button instance from scratch.

Begin by creating a new Button instance.

1var oButton = new YAHOO.widget.Button({  
2                                    id: "ok-button",  
3                                    label: "OK",  
4                                    container: "buttoncontainer" }); 
view plain | print | ?

Next, add style definitions for borders, background colors, and apply a transparent background to the Button's root element.

1.yui-button { 
2 
3    border-width1px 0
4    border-stylesolid
5    border-color: #004d89
6    marginauto .25em
7 
8    /*
9        Give the Button instance a transparent background image that 
10        provides a glossy, glass-like look.  Since the background image is
11        transparent, it can apply the glass effect the Button instance
12        regardless of its background color.
13    */ 
14    backgroundurl(../button/assets/gloss.png) repeat-x left center
15     
16} 
17
18.ie6 { 
19 
20    /* Make background image transparent IE 6 using the AlphaImageLoader. */ 
21    background-imagenone
22    filterprogid:DXImageTransform.Microsoft.AlphaImageLoader(src='../button/assets/gloss.png'sizingMethod = 'scale'); 
23 
24} 
25
26.yui-button .first-child { 
27 
28    border-width0 1px
29    border-stylesolid
30    border-color: #004d89
31    margin0 -1px
32 
33    /*
34        Using negative margins for rounded corners won't work in IE 6 and 
35        IE 7 (Quirks Mode Only), so set the "margin" property to "0" for 
36        those browsers.
37    */ 
38    _margin0
39 
40} 
41 
42.yui-button button, 
43.yui-button a { 
44 
45    padding0 10px
46    font-size93%;  /* 12px */ 
47    line-height2;  /* ~24px */ 
48    *line-height1.7/* For IE */ 
49    min-height2em/* For Gecko */ 
50    *min-heightauto/* For IE */ 
51    color: #fff; 
52    bordersolid 1px #599acd; 
53 
54} 
55
56.yui-button#ok-button { 
57     
58    background-color: #004d89
59 
60} 
view plain | print | ?

Lastly, utilize the ColorAnim utility to animate the Button instance's background color.

1/*
2    Begin animating the Button instance's background color once it is 
3    appended to its containing element.
4*/ 
5 
6oButton.on("appendTo"function () { 
7 
8    /*
9        Apply a special CSS class to be able to target IE 6 
10        specifically in the CSS.
11    */ 
12 
13    if (YAHOO.env.ua.ie == 6) { 
14     
15        oButton.addClass("ie6"); 
16     
17    } 
18 
19 
20    // Create a new ColorAnim instance 
21 
22    var oButtonAnim = new YAHOO.util.ColorAnim("ok-button", { backgroundColor: { to: "#b1ddff" } }); 
23 
24 
25    /*
26        Restart the color animation each time the target color has 
27        been applied.
28    */  
29 
30    oButtonAnim.onComplete.subscribe(function () { 
31 
32        this.attributes.backgroundColor.to = (this.attributes.backgroundColor.to == "#b1ddff") ? "#016bbd" : "#b1ddff"
33     
34        this.animate(); 
35     
36    }); 
37     
38    oButtonAnim.animate(); 
39 
40}); 
view plain | print | ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings