Permalink
Browse files

Merge pull request #10 from patrickhlauke/gh-pages

Don't kill keyboard focus, use <buttons> for buttons
  • Loading branch information...
2 parents 9e3e8b0 + f969605 commit 0b1b30d1d0d148f61a14dbd68eb305fe5886d8f0 @csswizardry committed May 7, 2014
Showing with 18 additions and 18 deletions.
  1. +1 −1 beautons.min.css
  2. +17 −17 index.html
View
2 beautons.min.css
@@ -2,4 +2,4 @@
*
* @csswizardry -- csswizardry.com/beautons
*
- */.btn{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:0;margin:0;padding-top:0;padding-bottom:0;line-height:3;height:3em;padding-right:1em;padding-left:1em;background-color:#2c77ba;border-radius:4px;overflow:visible}.btn,.btn:hover,.btn:active,.btn:focus{text-decoration:none;color:#fff}.btn:hover{box-shadow:0 0 5px rgba(0,0,0,0.5)}.btn:active,.btn:focus{outline:0;box-shadow:0 0 5px rgba(0,0,0,0.5) inset}.btn::-moz-focus-inner{border:0;padding:0}.btn--small{padding-right:.5em;padding-left:.5em;line-height:2;height:2em}.btn--large{padding-right:1.5em;padding-left:1.5em;line-height:4;height:4em}.btn--huge{padding-right:2em;padding-left:2em;line-height:5;height:5em}.btn--full{width:100%;padding-right:0;padding-left:0;text-align:center}.btn--alpha{font-size:3rem}.btn--beta{font-size:2rem}.btn--gamma{font-size:1rem}.btn--natural{vertical-align:baseline;font-size:inherit;line-height:inherit;height:auto;padding-right:.5em;padding-left:.5em}.btn--positive{background-color:#4a993e;color:#fff}.btn--negative{background-color:#b33630;color:#fff}.btn--inactive,.btn--inactive:hover,.btn--inactive:active,.btn--inactive:focus{background-color:#ddd;color:#777;cursor:default;box-shadow:none}.btn--soft{border-radius:5em}.btn--hard{border-radius:0}
+ */.btn{display:inline-block;vertical-align:middle;white-space:nowrap;font-family:inherit;font-size:100%;cursor:pointer;border:0;margin:0;padding-top:0;padding-bottom:0;line-height:3;height:3em;padding-right:1em;padding-left:1em;background-color:#2c77ba;border-radius:4px;overflow:visible}.btn,.btn:hover,.btn:active,.btn:focus{text-decoration:none;color:#fff}.btn:hover,.btn:focus{box-shadow:0 0 5px rgba(0,0,0,0.5)}.btn:active{outline:0;box-shadow:0 0 5px rgba(0,0,0,0.5) inset}.btn::-moz-focus-inner{border:0;padding:0}.btn--small{padding-right:.5em;padding-left:.5em;line-height:2;height:2em}.btn--large{padding-right:1.5em;padding-left:1.5em;line-height:4;height:4em}.btn--huge{padding-right:2em;padding-left:2em;line-height:5;height:5em}.btn--full{width:100%;padding-right:0;padding-left:0;text-align:center}.btn--alpha{font-size:3rem}.btn--beta{font-size:2rem}.btn--gamma{font-size:1rem}.btn--natural{vertical-align:baseline;font-size:inherit;line-height:inherit;height:auto;padding-right:.5em;padding-left:.5em}.btn--positive{background-color:#4a993e;color:#fff}.btn--negative{background-color:#b33630;color:#fff}.btn--inactive,.btn--inactive:hover,.btn--inactive:active,.btn--inactive:focus{background-color:#ddd;color:#777;cursor:default;box-shadow:none}.btn--soft{border-radius:5em}.btn--hard{border-radius:0}
View
34 index.html
@@ -57,7 +57,7 @@
</tr>
<tr>
<td>
- <a href="#" class="btn">Button</a>
+ <button class="btn">Button</button>
</td>
<td>
<code>.btn</code>
@@ -72,7 +72,7 @@
</tr>
<tr>
<td>
- <a href="#" class="btn btn--small">Button</a>
+ <button class="btn btn--small">Button</button>
</td>
<td>
<code>.btn .btn--small</code>
@@ -83,7 +83,7 @@
</tr>
<tr>
<td>
- <a href="#" class="btn btn--large">Button</a>
+ <button class="btn btn--large">Button</button>
</td>
<td>
<code>.btn .btn--large</code>
@@ -94,7 +94,7 @@
</tr>
<tr>
<td>
- <a href="#" class="btn btn--huge">Button</a>
+ <button class="btn btn--huge">Button</button>
</td>
<td>
<code>.btn .btn--huge</code>
@@ -105,7 +105,7 @@
</tr>
<tr>
<td>
- <a href="#" class="btn btn--full">Button</a>
+ <button class="btn btn--full">Button</button>
</td>
<td>
<code>.btn .btn--full</code>
@@ -120,7 +120,7 @@
</tr>
<tr>
<td>
- <a href="#" class="btn btn--alpha">Button</a>
+ <button class="btn btn--alpha">Button</button>
</td>
<td>
<code>.btn .btn--alpha</code>
@@ -131,7 +131,7 @@
</tr>
<tr>
<td>
- <a href="#" class="btn btn--beta">Button</a>
+ <button class="btn btn--beta">Button</button>
</td>
<td>
<code>.btn .btn--beta</code>
@@ -142,7 +142,7 @@
</tr>
<tr>
<td>
- <a href="#" class="btn btn--gamma">Button</a>
+ <button class="btn btn--gamma">Button</button>
</td>
<td>
<code>.btn .btn--gamma</code>
@@ -157,7 +157,7 @@
</tr>
<tr>
<td>
- <a href="#" class="btn btn--positive">Button</a>
+ <button class="btn btn--positive">Button</button>
</td>
<td>
<code>.btn .btn--positive</code>
@@ -168,7 +168,7 @@
</tr>
<tr>
<td>
- <a href="#" class="btn btn--negative">Button</a>
+ <button class="btn btn--negative">Button</button>
</td>
<td>
<code>.btn .btn--negative</code>
@@ -179,7 +179,7 @@
</tr>
<tr>
<td>
- <a href="#" class="btn btn--inactive">Button</a>
+ <button class="btn btn--inactive">Button</button>
</td>
<td>
<code>.btn .btn--inactive</code>
@@ -194,7 +194,7 @@
</tr>
<tr>
<td>
- <a href="#" class="btn btn--soft">Button</a>
+ <button class="btn btn--soft">Button</button>
</td>
<td>
<code>.btn .btn--soft</code>
@@ -205,7 +205,7 @@
</tr>
<tr>
<td>
- <a href="#" class="btn btn--hard">Button</a>
+ <button class="btn btn--hard">Button</button>
</td>
<td>
<code>.btn .btn--hard</code>
@@ -220,7 +220,7 @@
</tr>
<tr>
<td>
- <a href="#" class="btn btn--large btn--positive">Button</a>
+ <button class="btn btn--large btn--positive">Button</button>
</td>
<td>
<code>.btn .btn--large .btn--positive</code>
@@ -231,7 +231,7 @@
</tr>
<tr>
<td>
- <a href="#" class="btn btn--negative btn--full btn--soft">Button</a>
+ <button class="btn btn--negative btn--full btn--soft">Button</button>
</td>
<td>
<code>.btn .btn--negative .btn--full .btn--soft</code>
@@ -242,7 +242,7 @@
</tr>
<tr>
<td>
- <a href="#" class="btn btn--positive btn--alpha btn--small">Button</a>
+ <button class="btn btn--positive btn--alpha btn--small">Button</button>
</td>
<td>
<code>.btn .btn--positive .btn--alpha .btn--small</code>
@@ -253,7 +253,7 @@
</tr>
<tr>
<td>
- <p>A <a href="#" class="btn btn--natural">button</a> in a paragraph.</p>
+ <p>A <button class="btn btn--natural">button</button> in a paragraph.</p>
</td>
<td>
<code>.btn .btn--natural</code>

0 comments on commit 0b1b30d

Please sign in to comment.