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 (6 lines)
1
2
3
4
5
6
<a href="#" class="link-button">Default</a>  
<a href="#" class="link-button green-button">Green</a>  
<a href="#" class="link-button orange-button">Orange</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 (6 lines)
1
2
3
4
5
6
<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 (12 lines)
1
2
3
4
5
6
7
8
9
10
11
12
<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>

Component List

Alerts
Alerts, announcements, updates, information

Content Blocks
Draw attention to or bundle a section of content

Labels and Badges
Labels, tags, badges, counts, etc

List Groups
Displaying lists of links

Statistics
Highlighting numbers of things

Website Components
Buttons, alerts, forms, and various other page elements

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.