Skip to content

Commit

Permalink
Minor tweaks and demo update
Browse files Browse the repository at this point in the history
  • Loading branch information
michenriksen committed Mar 19, 2011
2 parents 5afdeb1 + 2b9cbde commit 5fdb641
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 90 deletions.
36 changes: 25 additions & 11 deletions demo.html
View file
Expand Up @@ -40,6 +40,19 @@ <h3>Result:</h3>
<a href="javascript:void(false)" class="button">This is a Button</a>
</div>
</article>

<p>You can also use the button tag:</p>

<article class="example">
<h3>Code:</h3>
<pre class="code"><span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>button</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"</span><span style='color:#00c4c4; '>button</span><span style='color:#00c4c4; '>"</span><span style='color:#ff8906; '>></span>This is a Button<span style='color:#fb8400; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>button</span><span style='color:#fb8400; '>></span>
</pre>

<h3>Result:</h3>
<div class="result">
<button class="button">This is a Button</button>
</div>
</article>

<p>If you prefer a pill-like button with more rounded corners, you can add a <code>.pill</code> class to the button</p>

Expand All @@ -50,7 +63,7 @@ <h3>Code:</h3>

<h3>Result:</h3>
<div class="result">
<a href="javascript:void(false)" class="pill button">This is a Pill Button</a>
<a href="javascript:void(false)" class="pill button">This is a Pill Button</a>
</div>
</article>

Expand All @@ -67,8 +80,8 @@ <h3>Code:</h3>

<h3>Result:</h3>
<div class="result">
<a href="javascript:void(false)" class="primary button">Publish Post</a> or <a href="javascript:void(false)" class="button">Save as Draft</a>
</div>
<a href="javascript:void(false)" class="primary button">Publish Post</a> or <a href="javascript:void(false)" class="button">Save as Draft</a>
</div>
</article>
</section>

Expand All @@ -88,7 +101,8 @@ <h3>Code:</h3>

<h3>Result:</h3>
<div class="result">
<a href="javascript:alert('You son of a bitch!\n\nYou just divided by zero, didn\'t you?')" class="negative button">Divide by Zero</a>
<a href="javascript:alert('You son of a bitch!\n\nYou just divided by zero, didn\'t you?')" class="negative button">Divide by Zero</a>
<button class="negative button">Divide by Zero</button>
</div>
</article>

Expand All @@ -109,7 +123,7 @@ <h3>Code:</h3>
</pre>

<h3>Result:</h3>
<a href="javascript:void(false)" class="left primary button">Archive</a><a href="javascript:void(false)" class="middle button">Report Spam</a><a href="javascript:void(false)" class="right negative button">Delete</a>
<a href="javascript:void(false)" class="left primary button">Archive</a><a href="javascript:void(false)" class="middle button">Report Spam</a><a href="javascript:void(false)" class="right negative button">Delete</a>
</article>

<p>
Expand All @@ -124,8 +138,8 @@ <h3>Code:</h3>
</pre>

<h3>Result:</h3>
<a href="javascript:void(false)" class="left primary pill button">Archive</a><a href="javascript:void(false)" class="middle pill button">Report Spam</a><a href="javascript:void(false)" class="right negative pill button">Delete</a>
</article>
<a href="javascript:void(false)" class="left primary pill button">Archive</a><a href="javascript:void(false)" class="middle pill button">Report Spam</a><a href="javascript:void(false)" class="right negative pill button">Delete</a>
</article>
</section>

<section class="odd">
Expand All @@ -142,8 +156,8 @@ <h3>Code:</h3>
</pre>

<h3>Result:</h3>
<a href="javascript:void(false)" class="button"><span class="magnifier icon"></span>Search</a>
</article>
<a href="javascript:void(false)" class="button"><span class="magnifier icon"></span>Search</a>
</article>

<p>Here is a list of all the supported icon classes:</p>

Expand Down Expand Up @@ -293,8 +307,8 @@ <h3>Code:</h3>
</pre>

<h3>Result:</h3>
<a href="javascript:void(false)" class="big button">Create Project</a>
</article>
<a href="javascript:void(false)" class="big button">Create Project</a>
</article>

</section>

Expand Down
Binary file modified images/css3buttons_backgrounds.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/css3buttons_icons.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
161 changes: 82 additions & 79 deletions stylesheets/css3buttons.css
View file
@@ -1,79 +1,82 @@
a.button { display: inline-block; padding: 7px 9px; font-size: 12px; line-height:1; color: #3C3C3D; text-shadow: 1px 1px 0 #FFFFFF; background: #ECECEC url('../images/css3buttons_backgrounds.png') 0 0 no-repeat; white-space: nowrap; overflow: visible; cursor: pointer; text-decoration: none; border: 1px solid #CACACA; -webkit-border-radius: 2px; -moz-border-radius: 2px; -webkit-background-clip: padding-box; border-radius: 2px; outline: none; position: relative; zoom: 1; *display: inline; }
a.button.primary { font-weight: bold }
a.button:hover { color: #FFFFFF; border-color: #388AD4; text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); background-position: 0 -40px; background-color: #2D7DC5; }
a.button:active,
a.button.active { background-position: 0 -81px; border-color: #347BBA; background-color: #0F5EA2; color: #FFFFFF; text-shadow: none; }
a.button:active { top: 1px }
a.button.negative:hover { color: #FFFFFF; background-position: 0 -121px; background-color: #D84743; border-color: #911D1B; }
a.button.negative:active,
a.button.negative.active { background-position: 0 -161px; background-color: #A5211E; border-color: #911D1B; }
a.button.pill { -webkit-border-radius: 19px; -moz-border-radius: 19px; border-radius: 19px; padding: 6px 12px; }
a.button.left { -webkit-border-bottom-right-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topright: 0px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; margin-right: 0px; }
a.button.middle { margin-right: 0px; margin-left: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border-left: none; }
a.button.right { -webkit-border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; margin-left: 0px; border-left: none;}
a.button.left:active,
a.button.middle:active,
a.button.right:active { top: 0px }
a.button.big { font-size: 16px; padding: 7px 16px; }
a.button span.icon { display: inline-block; width: 14px; height: 12px; margin: auto 7px auto auto; position: relative; top: 1px; background-image: url('../images/css3buttons_icons.png'); background-repeat: no-repeat; }
a.big.button span.icon { top: 0px }
a.button span.icon.book { background-position: 0 0 }
a.button:hover span.icon.book { background-position: 0 -15px }
a.button span.icon.calendar { background-position: 0 -30px }
a.button:hover span.icon.calendar { background-position: 0 -45px }
a.button span.icon.chat { background-position: 0 -60px }
a.button:hover span.icon.chat { background-position: 0 -75px }
a.button span.icon.check { background-position: 0 -90px }
a.button:hover span.icon.check { background-position: 0 -103px }
a.button span.icon.clock { background-position: 0 -116px }
a.button:hover span.icon.clock { background-position: 0 -131px }
a.button span.icon.cog { background-position: 0 -146px }
a.button:hover span.icon.cog { background-position: 0 -161px }
a.button span.icon.comment { background-position: 0 -176px }
a.button:hover span.icon.comment { background-position: 0 -190px }
a.button span.icon.cross { background-position: 0 -204px }
a.button:hover span.icon.cross { background-position: 0 -219px }
a.button span.icon.downarrow { background-position: 0 -234px }
a.button:hover span.icon.downarrow { background-position: 0 -249px }
a.button span.icon.fork { background-position: 0 -264px }
a.button:hover span.icon.fork { background-position: 0 -279px }
a.button span.icon.heart { background-position: 0 -294px }
a.button:hover span.icon.heart { background-position: 0 -308px }
a.button span.icon.home { background-position: 0 -322px }
a.button:hover span.icon.home { background-position: 0 -337px }
a.button span.icon.key { background-position: 0 -352px }
a.button:hover span.icon.key { background-position: 0 -367px }
a.button span.icon.leftarrow { background-position: 0 -382px }
a.button:hover span.icon.leftarrow { background-position: 0 -397px }
a.button span.icon.lock { background-position: 0 -412px }
a.button:hover span.icon.lock { background-position: 0 -427px }
a.button span.icon.loop { background-position: 0 -442px }
a.button:hover span.icon.loop { background-position: 0 -457px }
a.button span.icon.magnifier { background-position: 0 -472px }
a.button:hover span.icon.magnifier { background-position: 0 -487px }
a.button span.icon.mail { background-position: 0 -502px }
a.button:hover span.icon.mail { background-position: 0 -514px }
a.button span.icon.move { background-position: 0 -526px }
a.button:hover span.icon.move { background-position: 0 -541px }
a.button span.icon.pen { background-position: 0 -556px }
a.button:hover span.icon.pen { background-position: 0 -571px }
a.button span.icon.pin { background-position: 0 -586px }
a.button:hover span.icon.pin { background-position: 0 -601px }
a.button span.icon.plus { background-position: 0 -616px }
a.button:hover span.icon.plus { background-position: 0 -631px }
a.button span.icon.reload { background-position: 0 -646px }
a.button:hover span.icon.reload { background-position: 0 -660px }
a.button span.icon.rightarrow { background-position: 0 -674px }
a.button:hover span.icon.rightarrow { background-position: 0 -689px }
a.button span.icon.rss { background-position: 0 -704px }
a.button:hover span.icon.rss { background-position: 0 -719px }
a.button span.icon.tag { background-position: 0 -734px }
a.button:hover span.icon.tag { background-position: 0 -749px }
a.button span.icon.trash { background-position: 0 -764px }
a.button:hover span.icon.trash { background-position: 0 -779px }
a.button span.icon.unlock { background-position: 0 -794px }
a.button:hover span.icon.unlock { background-position: 0 -809px }
a.button span.icon.uparrow { background-position: 0 -824px }
a.button:hover span.icon.uparrow { background-position: 0 -839px }
a.button span.icon.user { background-position: 0 -854px }
a.button:hover span.icon.user { background-position: 0 -869px }
a.button, button { display: inline-block; padding: 6px 5px 5px 5px; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12px; color: #3C3C3D; text-shadow: 1px 1px 0 #FFFFFF; background: #ECECEC url('../images/css3buttons_backgrounds.png') 0 0 no-repeat; white-space: nowrap; overflow: visible; cursor: pointer; text-decoration: none; border: 1px solid #CACACA; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; outline: none; position: relative; zoom: 1; line-height: 1.11; *display: inline; *vertical-align: middle; }
button { margin-left: 0; margin-right: 0; *padding: 5px 5px 3px 5px; }
button::-moz-focus-inner { border: 0; padding:0px; }
a.button.primary, button.primary { font-weight: bold }
a.button:hover, button:hover { color: #FFFFFF; border-color: #388AD4; text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); background-position: 0 -40px; background-color: #2D7DC5; }
a.button:active, button:active,
a.button.active, button.active { background-position: 0 -81px; border-color: #347BBA; background-color: #0F5EA2; color: #FFFFFF; text-shadow: none; }
a.button:active, button:active { top: 1px }
a.button.negative:hover, button.negative:hover { color: #FFFFFF; background-position: 0 -121px; background-color: #D84743; border-color: #911D1B; }
a.button.negative:active, button.negative:active,
a.button.negative.active, button.negative.active { background-position: 0 -161px; background-color: #A5211E; border-color: #911D1B; }
a.button.pill, button.pill { -webkit-border-radius: 19px; -moz-border-radius: 19px; border-radius: 19px; padding: 5px 10px 4px 10px; *padding: 4px 10px; }
a.button.left, button.left { -webkit-border-bottom-right-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topright: 0px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; margin-right: 0px; }
a.button.middle, button.middle { margin-right: 0px; margin-left: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border-right: none; border-left: none; }
a.button.right, button.right { -webkit-border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; margin-left: 0px; }
a.button.left:active, button.left:active,
a.button.middle:active, button.middle:active,
a.button.right:active, button.right:active { top: 0px }
a.button.big, button.big { font-size: 16px; padding-left: 17px; padding-right: 17px; }
button.big { *padding: 4px 17px 2px 17px; }
a.button span.icon, button span.icon { display: inline-block; width: 14px; height: 12px; margin: auto 7px auto auto; position: relative; top: 2px; *top: 0px; background-image: url('../images/css3buttons_icons.png'); background-repeat: no-repeat; }
a.big.button span.icon, button.big span.icon, { top: 0px }
a.button span.icon.book, button span.icon.book { background-position: 0 0 }
a.button:hover span.icon.book, button:hover span.icon.book { background-position: 0 -15px }
a.button span.icon.calendar, button span.icon.calendar { background-position: 0 -30px }
a.button:hover span.icon.calendar, button:hover span.icon.calendar { background-position: 0 -45px }
a.button span.icon.chat, button span.icon.chat { background-position: 0 -60px }
a.button:hover span.icon.chat, button:hover span.icon.chat { background-position: 0 -75px }
a.button span.icon.check, button span.icon.check { background-position: 0 -90px }
a.button:hover span.icon.check, button:hover span.icon.check { background-position: 0 -103px }
a.button span.icon.clock, button span.icon.clock { background-position: 0 -116px }
a.button:hover span.icon.clock, button:hover span.icon.clock { background-position: 0 -131px }
a.button span.icon.cog, button span.icon.cog { background-position: 0 -146px }
a.button:hover span.icon.cog, button:hover span.icon.cog { background-position: 0 -161px }
a.button span.icon.comment, button span.icon.comment { background-position: 0 -176px }
a.button:hover span.icon.comment, button:hover span.icon.comment { background-position: 0 -190px }
a.button span.icon.cross, button span.icon.cross { background-position: 0 -204px }
a.button:hover span.icon.cross, button:hover span.icon.cross { background-position: 0 -219px }
a.button span.icon.downarrow, button span.icon.downarrow { background-position: 0 -234px }
a.button:hover span.icon.downarrow, button:hover span.icon.downarrow { background-position: 0 -249px }
a.button span.icon.fork, button span.icon.fork { background-position: 0 -264px }
a.button:hover span.icon.fork, button:hover span.icon.fork { background-position: 0 -279px }
a.button span.icon.heart, button span.icon.heart { background-position: 0 -294px }
a.button:hover span.icon.heart, button:hover span.icon.heart { background-position: 0 -308px }
a.button span.icon.home, button span.icon.home { background-position: 0 -322px }
a.button:hover span.icon.home, button:hover span.icon.home { background-position: 0 -337px }
a.button span.icon.key, button span.icon.key { background-position: 0 -352px }
a.button:hover span.icon.key, button:hover span.icon.key { background-position: 0 -367px }
a.button span.icon.leftarrow, button span.icon.leftarrow { background-position: 0 -382px }
a.button:hover span.icon.leftarrow, button:hover span.icon.leftarrow { background-position: 0 -397px }
a.button span.icon.lock, button span.icon.lock { background-position: 0 -412px }
a.button:hover span.icon.lock, button:hover span.icon.lock { background-position: 0 -427px }
a.button span.icon.loop, button span.icon.loop { background-position: 0 -442px }
a.button:hover span.icon.loop, button:hover span.icon.loop { background-position: 0 -457px }
a.button span.icon.magnifier, button span.icon.magnifier { background-position: 0 -472px }
a.button:hover span.icon.magnifier, button:hover span.icon.magnifier { background-position: 0 -487px }
a.button span.icon.mail, button span.icon.mail { background-position: 0 -502px }
a.button:hover span.icon.mail, button:hover span.icon.mail { background-position: 0 -514px }
a.button span.icon.move, button span.icon.move { background-position: 0 -526px }
a.button:hover span.icon.move, button:hover span.icon.move { background-position: 0 -541px }
a.button span.icon.pen, button span.icon.pen { background-position: 0 -556px }
a.button:hover span.icon.pen, button:hover span.icon.pen { background-position: 0 -571px }
a.button span.icon.pin, button span.icon.pin { background-position: 0 -586px }
a.button:hover span.icon.pin, button:hover span.icon.pin { background-position: 0 -601px }
a.button span.icon.plus, button span.icon.plus { background-position: 0 -616px }
a.button:hover span.icon.plus, button:hover span.icon.plus { background-position: 0 -631px }
a.button span.icon.reload, button span.icon.reload { background-position: 0 -646px }
a.button:hover span.icon.reload, button:hover span.icon.reload { background-position: 0 -660px }
a.button span.icon.rightarrow, button span.icon.rightarrow { background-position: 0 -674px }
a.button:hover span.icon.rightarrow, button:hover span.icon.rightarrow { background-position: 0 -689px }
a.button span.icon.rss, button span.icon.rss { background-position: 0 -704px }
a.button:hover span.icon.rss, button:hover span.icon.rss { background-position: 0 -719px }
a.button span.icon.tag, button span.icon.tag { background-position: 0 -734px }
a.button:hover span.icon.tag, button:hover span.icon.tag { background-position: 0 -749px }
a.button span.icon.trash, button span.icon.trash { background-position: 0 -764px }
a.button:hover span.icon.trash, button:hover span.icon.trash { background-position: 0 -779px }
a.button span.icon.unlock, button span.icon.unlock { background-position: 0 -794px }
a.button:hover span.icon.unlock, button:hover span.icon.unlock { background-position: 0 -809px }
a.button span.icon.uparrow, button span.icon.uparrow { background-position: 0 -824px }
a.button:hover span.icon.uparrow, button:hover span.icon.uparrow { background-position: 0 -839px }
a.button span.icon.user, button span.icon.user { background-position: 0 -854px }
a.button:hover span.icon.user, button:hover span.icon.user { background-position: 0 -869px }

0 comments on commit 5fdb641

Please sign in to comment.