From 575b82473f8d248ca3782fa86ce1c92eea03905c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 6 Feb 2012 23:34:03 -0800 Subject: rearrange some of the docs on buttons to show examples of all possible renderings along with code snippets and note about usage; also fix the portrait tablet media query --- docs/base-css.html | 41 +++++++++++++++++++++++------------------ 1 file changed, 23 insertions(+), 18 deletions(-) (limited to 'docs/base-css.html') diff --git a/docs/base-css.html b/docs/base-css.html index b345a8434..a7dcbff19 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1289,17 +1289,10 @@ For example, <code>section</code> should be wrapped as inline.

Buttons for actions

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.

+

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements.

+

Cross browser compatibility

+

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

-
-

For anchors and forms

-

Button styles can be applied to anything with the .btn applied. However, typically you'll want to apply these to only <a> and <button> elements.

-
-
-

Note: All buttons must include the .btn class. Button styles should be applied to <button> and <a> elements for consistency.

-
- - -

Multiple sizes

Fancy larger or smaller buttons? Add .btn-large or .btn-small for two additional sizes.

@@ -1311,8 +1304,7 @@ For example, <code>section</code> should be wrapped as inline. Primary action Action

-
-
+

Disabled state

For disabled buttons, use .btn-disabled for links and :disabled for <button> elements.

@@ -1325,14 +1317,27 @@ For example, <code>section</code> should be wrapped as inline.

-

Cross browser compatibility

-

In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners.

-

Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow—unfortunately we can't fix this.

+

One class, multiple tags

+

Use the .btn class on an <a>, <button>, or <input> element.

+
+Link + + + +
+
+<a class="btn" href="">Link</a>
+<button class="btn" type="submit">
+  Button
+</button>
+<input class="btn" type="button" 
+         value="Input">
+<input class="btn" type="submit" 
+         value="Submit">
+
+

As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

- -
- -- cgit v1.2.3