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

1 files changed, 26 insertions, 0 deletions

diff --git a/css.html b/css.html
index 99283f2f9..cc482f95e 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>