Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Implemented positive buttons

  • Loading branch information...
commit d1461a01f5cf649133c7db63d3b7b676443ceb2c 1 parent 3db5c76
michenriksen authored
View
40 demo.html
@@ -102,13 +102,31 @@ <h1 id="title">CSS3 Buttons</h1>
<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>
- <button class="negative button">Divide by Zero</button>
</div>
</article>
-
</section>
+
+ <section class="even">
+ <h2>Buttons with positive actions</h2>
+
+ <p>
+ If you have a button that triggers an action you want to encourage your users to do, you can give a button a <code>.positive</code> class
+ and the hover-state will change to green
+ </p>
+
+ <article class="example">
+ <h3>Code:</h3>
+ <pre class="code"><span style='color:#ff8906; '>&lt;</span><span style='color:#e66170; font-weight:bold; '>a</span> href<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"</span><span style='color:#e66170; font-weight:bold; '>#</span><span style='color:#00c4c4; '>"</span> class<span style='color:#d2cd86; '>=</span><span style='color:#00c4c4; '>"</span><span style='color:#00c4c4; '>positive button</span><span style='color:#00c4c4; '>"</span><span style='color:#ff8906; '>></span>Save the World<span style='color:#fb8400; '>&lt;/</span><span style='color:#e66170; font-weight:bold; '>a</span><span style='color:#fb8400; '>></span>
+ </pre>
+
+ <h3>Result:</h3>
+ <div class="result">
+ <a href="javascript:void(false)" class="positive button">Save the World</a>
+ </div>
+ </article>
+ </section>
- <section class="even">
+ <section class="odd">
<h2>Grouped buttons</h2>
<p>
@@ -142,7 +160,7 @@ <h1 id="title">CSS3 Buttons</h1>
</article>
</section>
- <section class="odd">
+ <section class="even">
<h2>Buttons with icons</h2>
<p>
@@ -287,13 +305,13 @@ <h1 id="title">CSS3 Buttons</h1>
</tr>
<tr>
<td><code>.user</code></td>
- <td><a href="javascript:void(false)" class="button"><span class="user icon"></span>Add New User</a></td>
+ <td><a href="javascript:void(false)" class="positive button"><span class="user icon"></span>Add New User</a></td>
</tr>
</table>
</article>
</section>
- <section class="even">
+ <section class="odd">
<h2>Big buttons</h2>
<p>
@@ -312,7 +330,7 @@ <h1 id="title">CSS3 Buttons</h1>
</section>
- <section class="odd">
+ <section class="even">
<h2>Browser compatibility</h2>
<p>
@@ -324,7 +342,7 @@ <h1 id="title">CSS3 Buttons</h1>
</p>
</section>
- <section class="even">
+ <section class="odd">
<h2>Installation</h2>
<ol>
@@ -344,7 +362,7 @@ <h1 id="title">CSS3 Buttons</h1>
</p>
</section>
- <section class="odd">
+ <section class="even">
<h2>License</h2>
<h3>The <a href="http://unlicense.org/">Unlicense</a>:</h3>
@@ -387,7 +405,7 @@ <h1 id="title">CSS3 Buttons</h1>
</blockquote>
</section>
- <section class="even">
+ <section class="odd">
<h2>Shout-Outs</h2>
<ul>
@@ -396,7 +414,7 @@ <h1 id="title">CSS3 Buttons</h1>
</ul>
</section>
- <section class="odd">
+ <section class="even">
<h2>Contact</h2>
<h3>Found a Bug?</h3>
View
BIN  images/css3buttons_backgrounds.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
3  stylesheets/css3buttons.css
@@ -9,6 +9,9 @@ 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.positive:hover, button.positive:hover { background-position: 0 -280px; background-color: #96ED89; border-color: #45BF55; }
+a.button.positive:active, button.positive:active,
+a.button.positive.active, button.positive.active { background-position: 0 -320px; background-color: #45BF55; }
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; }
Please sign in to comment.
Something went wrong with that request. Please try again.