diff options
Diffstat (limited to 'css.html')
| -rw-r--r-- | css.html | 26 |
1 files changed, 26 insertions, 0 deletions
@@ -2112,6 +2112,32 @@ For example, <code><section></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><button></code> elements, this is done via <code>:active</code>. For <code><a></code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> <code><button></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><a></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> |