austinthecoder/buttons_sandbox.html

## buttons_sandbox.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
  </head>
  <body>
    <p><strong style="color:#c00;">DO NOT USE THIS CODE AS IS.</strong> This is an attempt to recreate <a href="../3.0/code.html">Custom Buttons v3.0</a> without requiring <a href="../3.0/img/bg-button.gif">3.0's background gradient image</a>, yet still retain some dimensionality (via a subtle flat shadow on the bottom half of the button). This example code currently works as intended in Firefox and Safari, but fails in IE. And it's a little messy in terms of the required DOM. All caveats and explanations from the <a href="../3.0/code.html">v3.0 code demo</a> apply here too.</p>

<form action="#">
  <p><a href="#" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></a> &nbsp;<code>&lt;a&gt;</code></p>

  <p><button type="button" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></button> &nbsp;<code>&lt;button&gt;</code></p>

  <p><a href="#" class="btn"><span><span><b>&nbsp;</b><u>longer button text</u></span></span></a> &nbsp;<code>&lt;a&gt;</code></p>

  <p><button type="button" class="btn"><span><span><b>&nbsp;</b><u>longer button text</u></span></span></button> &nbsp;<code>&lt;button&gt;</code></p>

  <p><button type="button" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></button>&nbsp;<button type="button" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></button>&nbsp;<button type="button" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></button> &nbsp;<code>&lt;button&gt; &lt;button&gt; &lt;button&gt;</code></p>


  <p><button type="button" class="btn primary"><span><span><b>&nbsp;</b><u>Save</u></span></span></button>&nbsp;<button type="button" class="btn"><span><span><b>&nbsp;</b><u>Cancel</u></span></span></button>
  &nbsp;<code>&lt;button class="primary"&gt; &lt;button&gt;</code></p>

  <p><button type="button" class="btn pill-l"><span><span><b>&nbsp;</b><u>Left</u></span></span></button><button type="button" class="btn pill-c"><span><span><b>&nbsp;</b><u>Center</u></span></span></button><button type="button" class="btn pill-r"><span><span><b>&nbsp;</b><u>Right</u></span></span></button>
  &nbsp;<code>&lt;button class="pill-l"&gt;&lt;button class="pill-c"&gt;&lt;button class="pill-r"&gt;</code></p>

</form>
  </body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title></title>
	</head>
	<body>
	<p><strong style="color:#c00;">DO NOT USE THIS CODE AS IS.</strong> This is an attempt to recreate <a href="../3.0/code.html">Custom Buttons v3.0</a> without requiring <a href="../3.0/img/bg-button.gif">3.0's background gradient image</a>, yet still retain some dimensionality (via a subtle flat shadow on the bottom half of the button). This example code currently works as intended in Firefox and Safari, but fails in IE. And it's a little messy in terms of the required DOM. All caveats and explanations from the <a href="../3.0/code.html">v3.0 code demo</a> apply here too.</p>

	<form action="#">
	<p><a href="#" class="btn"><span><span><b> </b><u>button</u></span></span></a>  <code><a></code></p>

	<p><button type="button" class="btn"><span><span><b> </b><u>button</u></span></span></button>  <code><button></code></p>

	<p><a href="#" class="btn"><span><span><b> </b><u>longer button text</u></span></span></a>  <code><a></code></p>

	<p><button type="button" class="btn"><span><span><b> </b><u>longer button text</u></span></span></button>  <code><button></code></p>

	<p><button type="button" class="btn"><span><span><b> </b><u>button</u></span></span></button> <button type="button" class="btn"><span><span><b> </b><u>button</u></span></span></button> <button type="button" class="btn"><span><span><b> </b><u>button</u></span></span></button>  <code><button> <button> <button></code></p>


	<p><button type="button" class="btn primary"><span><span><b> </b><u>Save</u></span></span></button> <button type="button" class="btn"><span><span><b> </b><u>Cancel</u></span></span></button>
	<code><button class="primary"> <button></code></p>

	<p><button type="button" class="btn pill-l"><span><span><b> </b><u>Left</u></span></span></button><button type="button" class="btn pill-c"><span><span><b> </b><u>Center</u></span></span></button><button type="button" class="btn pill-r"><span><span><b> </b><u>Right</u></span></span></button>
	<code><button class="pill-l"><button class="pill-c"><button class="pill-r"></code></p>

	</form>
	</body>
	</html>