compass/examples/blueprint_plugins/plugins/buttons.html

60 lines
2.1 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Blueprint Buttons Sample Page</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="../stylesheets/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../stylesheets/print.css" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link rel="stylesheet" href="../stylesheets/buttons.css" type="text/css" media="screen, projection">
</head>
<body>
<div class="container">
<h1>A Button Example Page</h1>
<hr>
<h2 class="alt">This sample page demonstrates what you can do with the Buttons plugin.</h2>
<hr>
<div class="span-12">
<h3>Link Buttons</h3>
<a class="button">Link Button</a>
<a class="button positive">Positive Button</a>
<a class="button negative">Negative Button</a>
</div>
<div class="span-12 last">
<h3>Real Buttons</h3>
<button>Normal Button</button>
<button class="positive">Positive Button</button>
<button class="negative">Negative Button</button>
</div>
<div class="span-12">
<h3>Link Buttons with Images</h3>
<a class="button"><img src="../images/buttons/tick.png" alt=""/> Save</a>
<a class="button positive"><img src="../images/buttons/key.png" alt=""/> Change Password</a>
<a class="button negative"><img src="../images/buttons/cross.png" alt=""/> Cancel</a>
</div>
<div class="span-12 last">
<h3>Real Buttons with Images</h3>
<button><img src="../images/buttons/tick.png" alt=""/> Save</button>
<button class="positive"><img src="../images/buttons/key.png" alt=""/> Change Password</button>
<button class="negative"><img src="../images/buttons/cross.png" alt=""/> Cancel</button>
</div>
<div class="span-24">
<p><a href="http://validator.w3.org/check?uri=referer">
<img src="valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" class="top"></a></p>
</div>
</div>
</body>
</html>