fixes #10316: Document .active and :active for buttons

diff --git a/_includes/nav-css.html b/_includes/nav-css.html
index 57aafd4708ff416d819be62954b8d93898d1b15f..ae5962c7c77678622124eae1ce30914764a659ce 100644 (file)
--- 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 99283f2f923744a45fc1db989c180f6a269a6b08..cc482f95e3a8aa4d1306016a7bc79fac7a810471 100644 (file)
--- 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>