~bac/juju-gui/trunkcopy

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

</div>

<h4 id="button-tags">Button Tags</h4>

<h4 id="other-tags">Other Tags</h4>

<h4 id="colors">Colors</h4>

<button class='yui3-button success'>.success <br> #57A957</button>

<button class='yui3-button warning'>.warning <br> #FAF55F</button>

<button class='yui3-button error'>.error <br> #C43C35</button>

<button class='yui3-button notice'>.notice <br> #1B7AE0</button>

<h4 id="icon-buttons">Icon Buttons</h4>

</button>

100

</button>

101

102

103

104

</button>

105

106

<h4 id="image-button">Image Button</h4>

107

108

109

</div>

110

111

<h4 id="source-html">Source: HTML</h4>

112

113

114

115

<h4>Button Tags</h4>

116

<button class='yui3-button'>&lt;button&gt;</button>

117

118

119

120

<h4>Other Tags</h4>

121

122

123

124

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>

130

131

<h4>Icon Buttons</h4>

132

133

134

</button>

135

136

137

138

</button>

139

140

141

142

</button>

143

144

<h4>Image Button</h4>

145

146

147

148

<h4 id="source-css">Source: CSS</h4>

149

<pre class="code prettyprint">.yui3-button {

150

margin:3px;

151

}

152

153

.warning{

154

background-color:#FAF55F;

155

}

156

157

.success{

158

background-color:#57A957;

159

color:white;

160

}

161

162

.error{

163

background-color:#C43C35;

164

color:white;

165

}

166

167

.notice{

168

background-color:#1B7AE0;

169

color:white;

170

}

171

172

.yui3-button-icon {

173

background-image: url("../assets/button/icon-sprite-dark-and-light-24.png");

174

background-repeat: no-repeat;

175

display: inline-block;

176

height: 20px;

177

vertical-align: middle;

178

width: 20px;

179

}

180

181

.yui3-button-icon-bold {

182

background-position: 1px 1px;

183

}

184

185

.yui3-button-icon-italic {

186

background-position: 1px -35px;

187

}

188

189

.yui3-button-icon-underline {

190

background-position: 1px -71px;

191

}</pre>

192

193

</div>

194

</div>

195

</div>

196

197

198

199

200

201

202

<h2 class="no-toc">Table of Contents</h2>

203

</div>

204

205

206

207

<li>

208

<a href="#button-tags">Button Tags</a>

209

</li>

210

<li>

211

<a href="#other-tags">Other Tags</a>

212

</li>

213

<li>

214

<a href="#colors">Colors</a>

215

</li>

216

<li>

217

<a href="#icon-buttons">Icon Buttons</a>

218

</li>

219

<li>

220

<a href="#image-button">Image Button</a>

221

</li>

222

<li>

223

<a href="#source-html">Source: HTML</a>

224

</li>

225

<li>

226

<a href="#source-css">Source: CSS</a>

227

</li>

228

</ul>

229

</div>

230

</div>

231

232

233

234

235

236

<h2 class="no-toc">Examples</h2>

237

</div>

238

239

240

241

242

243

244

<a href="cssbutton.html">Styling elements with cssbutton</a>

245

</li>

246

247

248

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>

251

</li>

252

253

254

255

256

<a href="button.html">Basic button widgets</a>

257

</li>

258

259

260

261

262

<a href="button-group.html">Managing groups of buttons with button-group</a>

263

</li>

264

265

266

</ul>

267

</div>

268

</div>

269

270

271

272

</div>

273

</div>

274

</div>

275

</div>

276

277

278

279

280

</body>

281

</html>

Older »