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. 

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 transparent-button">Transparent</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.

Sizes

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

Large and small link buttons
<p>
    <a href="#" class="link-button large-button">Default Large</a> 
</p>
<p>
    <a href="#" class="link-button small-button">Default Small</a> 
</p>

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.