5
<title>Example: Styling elements with cssbutton</title>
6
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maven+Pro:400,700">
7
<link rel="stylesheet" href="../../build/cssgrids/grids-min.css">
8
<link rel="stylesheet" href="../assets/css/main.css">
9
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
10
<script src="../../build/yui/yui-min.js"></script>
15
<h1>Example: Styling elements with cssbutton</h1>
18
<a href="#toc" class="jump">Jump to Table of Contents</a>
22
<div class="yui3-u-3-4">
24
<div class="content"><link rel="stylesheet" href='../../build/cssbutton/cssbutton.css'></link>
30
background-color:#FAF55F;
34
background-color:#57A957;
39
background-color:#C43C35;
44
background-color:#1B7AE0;
49
background-image: url("../assets/button/icon-sprite-dark-and-light-24.png");
50
background-repeat: no-repeat;
51
display: inline-block;
53
vertical-align: middle;
57
.yui3-button-icon-bold {
58
background-position: 1px 1px;
61
.yui3-button-icon-italic {
62
background-position: 1px -35px;
65
.yui3-button-icon-underline {
66
background-position: 1px -71px;
70
<p>In this example, we'll look at a few ways to use the <code>'cssbutton'</code> module to enhance the look & feel of the default browser buttons.</p>
74
<!-- Include the cssbutton stylesheet -->
75
<link ref="stylsheet" href="http://yui.yahooapis.com/3.5.1/build/cssbutton/cssbutton.css">
77
<h4 id="button-tags">Button Tags</h4>
78
<button class='yui3-button'><button></button>
79
<input type='button' class='yui3-button' value='<input type="button">'>
80
<input type='submit' class='yui3-button' value='<input type="submit">'>
82
<h4 id="other-tags">Other Tags</h4>
83
<div class='yui3-button'><div></div>
84
<span class='yui3-button'><span></span>
85
<a class='yui3-button'><a></a>
87
<h4 id="colors">Colors</h4>
88
<button class='yui3-button success'>.success <br> #57A957</button>
89
<button class='yui3-button warning'>.warning <br> #FAF55F</button>
90
<button class='yui3-button error'>.error <br> #C43C35</button>
91
<button class='yui3-button notice'>.notice <br> #1B7AE0</button>
93
<h4 id="icon-buttons">Icon Buttons</h4>
94
<button class='yui3-button'>
95
<span class='yui3-button-icon yui3-button-icon-bold'></span>
98
<button class='yui3-button'>
99
<span class='yui3-button-icon yui3-button-icon-italic'></span>
102
<button class='yui3-button'>
103
<span class='yui3-button-icon yui3-button-icon-underline'></span>
106
<h4 id="image-button">Image Button</h4>
107
<input type='image' id='imageButton' class='yui3-button' src="../assets/button/yui-logo.png"></input>
111
<h4 id="source-html">Source: HTML</h4>
112
<pre class="code prettyprint"><!-- Include the cssbutton stylesheet -->
113
<link ref="stylsheet" href="http://yui.yahooapis.com/3.5.1/build/cssbutton/cssbutton.css">
115
<h4>Button Tags</h4>
116
<button class='yui3-button'>&lt;button&gt;</button>
117
<input type='button' class='yui3-button' value='&lt;input type="button"&gt;'>
118
<input type='submit' class='yui3-button' value='&lt;input type="submit"&gt;'>
120
<h4>Other Tags</h4>
121
<div class='yui3-button'>&lt;div&gt;</div>
122
<span class='yui3-button'>&lt;span&gt;</span>
123
<a class='yui3-button'>&lt;a&gt;</a>
125
<h4>Colors</h4>
126
<button class='yui3-button success'>.success <br> #57A957</button>
127
<button class='yui3-button warning'>.warning <br> #FAF55F</button>
128
<button class='yui3-button error'>.error <br> #C43C35</button>
129
<button class='yui3-button notice'>.notice <br> #1B7AE0</button>
131
<h4>Icon Buttons</h4>
132
<button class='yui3-button'>
133
<span class='yui3-button-icon yui3-button-icon-bold'></span>
136
<button class='yui3-button'>
137
<span class='yui3-button-icon yui3-button-icon-italic'></span>
140
<button class='yui3-button'>
141
<span class='yui3-button-icon yui3-button-icon-underline'></span>
144
<h4>Image Button</h4>
145
<input type='image' id='imageButton' class='yui3-button' src="../assets/button/yui-logo.png"></input></pre>
148
<h4 id="source-css">Source: CSS</h4>
149
<pre class="code prettyprint">.yui3-button {
154
background-color:#FAF55F;
158
background-color:#57A957;
163
background-color:#C43C35;
168
background-color:#1B7AE0;
173
background-image: url("../assets/button/icon-sprite-dark-and-light-24.png");
174
background-repeat: no-repeat;
175
display: inline-block;
177
vertical-align: middle;
181
.yui3-button-icon-bold {
182
background-position: 1px 1px;
185
.yui3-button-icon-italic {
186
background-position: 1px -35px;
189
.yui3-button-icon-underline {
190
background-position: 1px -71px;
197
<div class="yui3-u-1-4">
198
<div class="sidebar">
200
<div id="toc" class="sidebox">
202
<h2 class="no-toc">Table of Contents</h2>
208
<a href="#button-tags">Button Tags</a>
211
<a href="#other-tags">Other Tags</a>
214
<a href="#colors">Colors</a>
217
<a href="#icon-buttons">Icon Buttons</a>
220
<a href="#image-button">Image Button</a>
223
<a href="#source-html">Source: HTML</a>
226
<a href="#source-css">Source: CSS</a>
234
<div class="sidebox">
236
<h2 class="no-toc">Examples</h2>
240
<ul class="examples">
243
<li data-description="This example shows how you can easily style button and non-button DOM elements to appear as buttons">
244
<a href="cssbutton.html">Styling elements with cssbutton</a>
249
<li data-description="This example shows a simple, light solution to enhance <button> nodes">
250
<a href="button-plugin.html">Enhancing <button> nodes with button-plugin</a>
255
<li data-description="This example demonstrates how to create button widgets">
256
<a href="button.html">Basic button widgets</a>
261
<li data-description="This example demonstrates how to create a widget containing a group of buttons">
262
<a href="button-group.html">Managing groups of buttons with button-group</a>
277
<script src="../assets/vendor/prettify/prettify-min.js"></script>
278
<script>prettyPrint();</script>