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.
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.
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.
Fancy larger or smaller buttons? Add .btn-large or .btn-small for two additional sizes.
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.
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.
Use the .btn class on an <a>, <button>, or <input> element.
+<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.
{{_i}}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.{{/i}}
+{{_i}}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.{{/i}}
{{_i}}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.{{/i}}
{{_i}}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.{{/i}}
{{_i}}Note: All buttons must include the .btn class. Button styles should be applied to <button> and <a> elements for consistency.{{/i}}
{{_i}}Fancy larger or smaller buttons? Add .btn-large or .btn-small for two additional sizes.{{/i}}
{{_i}}For disabled buttons, use .btn-disabled for links and :disabled for <button> elements.{{/i}}
@@ -1249,14 +1241,27 @@
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.
{{_i}}Use the .btn class on an <a>, <button>, or <input> element.{{/i}}
+<a class="btn" href="">{{_i}}Link{{/i}}</a>
+<button class="btn" type="submit">
+ {{_i}}Button{{/i}}
+</button>
+<input class="btn" type="button"
+ value="{{_i}}Input{{/i}}">
+<input class="btn" type="submit"
+ value="{{_i}}Submit{{/i}}">
+
+ {{_i}}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.{{/i}}