YUI Library Examples: Button Control: Glowing Button

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.


1	var 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-width: 1px 0;
4	border-style: solid;
5	border-color: #004d89;
6	margin: auto .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	background: url(../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-image: none;
22	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../button/assets/gloss.png', sizingMethod = 'scale');
23
24	}
25
26	.yui-button .first-child {
27
28	border-width: 0 1px;
29	border-style: solid;
30	border-color: #004d89;
31	margin: 0 -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	_margin: 0;
39
40	}
41
42	.yui-button button,
43	.yui-button a {
44
45	padding: 0 10px;
46	font-size: 93%; /* 12px */
47	line-height: 2; /* ~24px */
48	line-height: 1.7; / For IE */
49	min-height: 2em; /* For Gecko */
50	min-height: auto; / For IE */
51	color: #fff;
52	border: solid 1px #599acd;
53
54	}
55
56	.yui-button#ok-button {
57
58	background-color: #004d89;
59
60	}
	view plain \| print \| ?

.yui-button {

border-width: 1px 0;
    border-style: solid;
    border-color: #004d89;
    margin: auto .25em;

/*
        Give the Button instance a transparent background image that 
        provides a glossy, glass-like look.  Since the background image is
        transparent, it can apply the glass effect the Button instance
        regardless of its background color.
    */
    background: url(../button/assets/gloss.png) repeat-x left center;
    
}

.ie6 {

/* Make background image transparent IE 6 using the AlphaImageLoader. */
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../button/assets/gloss.png', sizingMethod = 'scale');

}

.yui-button .first-child {

border-width: 0 1px;
    border-style: solid;
    border-color: #004d89;
    margin: 0 -1px;

/*
		Using negative margins for rounded corners won't work in IE 6 and 
		IE 7 (Quirks Mode Only), so set the "margin" property to "0" for 
		those browsers.
	*/
 	_margin: 0;

}

.yui-button button,
.yui-button a {

padding: 0 10px;
    font-size: 93%;  /* 12px */
    line-height: 2;  /* ~24px */
    *line-height: 1.7; /* For IE */
    min-height: 2em; /* For Gecko */
    *min-height: auto; /* For IE */
    color: #fff;
    border: solid 1px #599acd;

}

.yui-button#ok-button {
    
    background-color: #004d89;

}

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
6	oButton.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.

YUI Logger Output:

Logger Console

INFO 1075ms (+1) 9:52:02 AM:
Button  loggerLink
Initialization completed.

INFO 1074ms (+1) 9:52:02 AM:

Button null

Setting attribute "href" using source element's attribute value of "btn_example13.html"

INFO 1073ms (+6) 9:52:02 AM:

Button null

Building the button using an existing HTML element as a source element.

INFO 1067ms (+2) 9:52:02 AM:
Button  ok-button
Initialization completed.

INFO 1065ms (+1) 9:52:02 AM:

Button null

No source HTML element. Building the button using the set of configuration attributes.

INFO 1064ms (+1064) 9:52:02 AM:
LogReader  instance0
LogReader initialized

INFO 0ms (+0) 9:52:01 AM:
global
Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

YUI Library Examples: Button Control: Glowing Button

Configuration for This Example

YUI Logger Output:

Logger Console

Button Control Examples:

More Button Control Resources: