Links in articles will appear as simple text links by default – light blue text that becomes darker and underlined when it'smoused-over.
If more emphasis is required for links in your article content, you can create more significant calls-to-action by styling your links as buttons. This is done by adding two class-names to the anchor element, btn and btn-<action type>. When these classes are added, the link will gain padding and colouring based on the type of action you want to convey:
<!-- Standard button --> <a class="btn btn-default">Default</a>
<!-- Identifies the primary action in a set of buttons --> <a class="btn btn-primary">Primary</a>
<!-- Indicates a successful or positive action --> <a class="btn btn-success">Success</a>
<!-- Contextual button for informational alert messages --> <a class="btn btn-info">Info</a>
<!-- Indicates caution should be taken with this action --> <a class="btn btn-warning">Warning</a>
<!-- Indicates a dangerous or potentially negative action --> <a class="btn btn-danger">Danger</a>
<!-- makes a button look like a link while maintaining button hit area --> <a class="btn btn-link">Link</a> |
The <a class="btn btn-link">Link</a> action type is unique because it appears very similarly to standard text link styles. The benefit of using the .btn-link action type instead of just plain text links is that the added padding applied to the link makes the hit area of the text link larger than would normally appear with a standard text link. This provides enhanced usability on touch screens, where a customer’s finger is far less accurate than that of a mouse cursor.
Additional classes like active, disabled, and btn-lg, btn-sm, btn-xs, can also be added to these buttons to provide additional styling.
For more information about Bootstrap’s button classes, refer to http://getbootstrap.com/css/#buttons.
