Link Buttons

Links that look like buttons

Overview

Link buttons are used to call attention to a link, usually for some kind of important action. The classes can be applied to anchor tags or button tags.

Default Link Buttons

Basic link buttons
<a href="#" class="link-button">Default</a> 
<a href="#" class="link-button green-button">Green</a> 
<a href="#" class="link-button red-button">Red</a> 
<a href="#" class="link-button disabled-button">Disabled</a>

Inverse Link Buttons

Use these if the button doesn't need to draw as much attention by adding the class .inverse-button.

Transparent Link Buttons

Adding the class .transparent-button makes the background transparent, removes the border, and removes the drop shadow.

Sizes

Change the size of link buttons by adding the class .small-button or .large-button. Large buttons are block-level.

Icons

You can use icons with all sizes of button. 

Link buttons with icons
<a href="#" class="link-button large-button">
    <span class="glyphicons glyphicons-download"></span> 
    Download this widget
</a> 
<a href="#" class="link-button green-button">
    <span class="glyphicons glyphicons-plus"></span> 
    Add a new widget
</a>  
<a href="#" class="link-button small-button red-button">
    <span class="glyphicons glyphicons-remove"></span> 
    Delete this widget
</a>

Link Button Groups

Add the class .disabled-button if one of them is 'toggled.' Note that these do not look good if they wrap, so limit the text and number of links so that it works on mobile.

Link button group
<p class="link-button-group">
    <a href="#" class="link-button disabled-button">
        View by Ward
    </a>
    <a href="#" class="link-button">
        View by Neighborhood
    </a>
</p>

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.