remove some callouts on buttons by rewriting things a bit

diff --git a/docs/components/buttons.md b/docs/components/buttons.md
index 79777e4ca3fbd713e2bdc7fb8ca41c839e78f45f..f84376c610c8e33c82b4b95af77fa1c9cd2c5000 100644 (file)
--- a/docs/components/buttons.md
+++ b/docs/components/buttons.md
@@ -37,7 +37,9 @@ Using color to add meaning to a button only provides a visual indication, which
 
 ## Button tags
 
-Use the button classes on an `<a>`, `<button>`, or `<input>` element.
+As a best practice, **we highly recommend using the `<button>` element whenever possible** to ensure matching cross-browser rendering. However, you may also use button classes on `<a>`, `<button>`, or `<input>` elements.
+
+When using button classes on `<a>` elements, be sure to include the `role="button"` for improved accessibility.
 
 {% example html %}
 <a class="btn btn-secondary" href="#" role="button">Link</a>
@@ -46,18 +48,6 @@ Use the button classes on an `<a>`, `<button>`, or `<input>` element.
 <input class="btn btn-secondary" type="submit" value="Submit">
 {% endexample %}
 
-{% callout warning %}
-#### Links acting as buttons
-
-If the `<a>` elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate `role="button"`.
-{% endcallout %}
-
-{% callout warning %}
-#### Cross-browser rendering
-
-As a best practice, **we highly recommend using the `<button>` element whenever possible** to ensure matching cross-browser rendering.
-{% endcallout %}
-
 ## Sizes
 
 Fancy larger or smaller buttons? Add `.btn-lg`, `.btn-sm`, or `.btn-xs` for additional sizes.