Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Button variants

  • Loading branch information...
commit 1a5a1f4272fa29d462f813b65b5b809345f35ae0 1 parent bffa887
@iKreativ authored
Showing with 58 additions and 2 deletions.
  1. +1 −1  assets/css/typography.css
  2. +57 −1 buttons.html
View
2  assets/css/typography.css
@@ -83,7 +83,7 @@ hr
width: 100%;
border: 0;
border-bottom: 1px solid #eeeeee;
- margin: 25px 0;
+ margin: 25px;
padding: 0;
float: left;
}
View
58 buttons.html
@@ -273,7 +273,63 @@
</tbody>
</table>
</div>
-
+
+ <hr>
+
+ <div class="one_full">
+ <h2>Button Variants</h2>
+
+ <table class="table-striped">
+ <thead>
+ <tr>
+ <th>Button</th>
+ <th>Usage</th>
+ </tr>
+ </thead>
+
+ <tbody>
+ <tr>
+ <td>
+ <a href="#" class="button small red">Small</a>
+ </td>
+ <td>
+ <code>&lt;a href=&quot;#&quot; class=&quot;button small red&quot;&gt;Small&lt;/a&gt;</code>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <a href="#" class="button medium green">Medium</a>
+ </td>
+ <td>
+ <code>&lt;a href=&quot;#&quot; class=&quot;button medium green&quot;&gt;Medium&lt;/a&gt;</code>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <a href="#" class="button large blue">Large</a>
+ </td>
+ <td>
+ <code>&lt;a href=&quot;#&quot; class=&quot;button large blue&quot;&gt;Large&lt;/a&gt;</code>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <a href="#" class="button rounded pink">Rounded</a>
+ </td>
+ <td>
+ <code>&lt;a href=&quot;#&quot; class=&quot;button rounded pink&quot;&gt;Rounded&lt;/a&gt;</code>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <hr>
+
+ <div class="one_full aligncenter">
+ <h3><span class="label red">Note</span> Don't forget, you can mix and match the buttons. Large pink rounded, small blue flat, medium green flat rounded....the choice is yours!</h3>
+ </div>
+
<hr>
<!-- footer -->
Please sign in to comment.
Something went wrong with that request. Please try again.