From 14b3a3542f15051e1274ff27cf9c0cf453b93243 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Mon, 2 Sep 2013 00:09:49 +0200
Subject: [PATCH] fixes #10316: Document .active and :active for buttons

---
 _includes/nav-css.html |  1 +
 css.html               | 26 ++++++++++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/_includes/nav-css.html b/_includes/nav-css.html
index 57aafd4708..ae5962c7c7 100644
--- a/_includes/nav-css.html
+++ b/_includes/nav-css.html
@@ -67,6 +67,7 @@
   <ul class="nav">
     <li><a href="#buttons-options">Options</a></li>
     <li><a href="#buttons-sizes">Sizes</a></li>
+    <li><a href="#buttons-active">Active state</a></li>
     <li><a href="#buttons-disabled">Disabled state</a></li>
     <li><a href="#buttons-tags">Button tags</a></li>
   </ul>
diff --git a/css.html b/css.html
index 99283f2f92..cc482f95e3 100644
--- a/css.html
+++ b/css.html
@@ -2112,6 +2112,32 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
 
+    <h2 id="buttons-active">Active state</h2>
+    <p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code>&lt;button&gt;</code> elements, this is done via <code>:active</code>. For <code>&lt;a&gt;</code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> <code>&lt;button&gt;</code>s should you need to replicate the active state progammatically.</p>
+
+    <h3>Button element</h3>
+    <p>No need to add <code>:active</code> as it's a pseudo state, but if you need it, go ahead and add <code>.active</code>.</p>
+    <p class="bs-example">
+      <button type="button" class="btn btn-primary btn-lg active">Primary button</button>
+      <button type="button" class="btn btn-default btn-lg active">Button</button>
+    </p>
+{% highlight html %}
+<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
+<button type="button" class="btn btn-default btn-lg active">Button</button>
+{% endhighlight %}
+
+    <h3>Anchor element</h3>
+    <p>Add the <code>.active</code> class to <code>&lt;a&gt;</code> buttons.</p>
+    <p class="bs-example">
+      <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
+      <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
+    </p>
+{% highlight html %}
+<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
+<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
+{% endhighlight %}
+
+
     <h2 id="buttons-disabled">Disabled state</h2>
     <p>Make buttons look unclickable by fading them back 50%.</p>