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        The following is necessary to get negative margins working in IE.s
35    */ 
36 
37    *positionrelative
38    *left-1px
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 | ?

Copyright © 2008 Yahoo! Inc. All rights reserved.

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