UPDATED on April 11 , 2018
Summary: Buttons are simple elements of interactive design that provide visual and navigational interest. On clicking a button, users expect an action typically consisting of navigation to a supplemental website, document, or image.
Notes:
- Buttons feature many variations, including link text, icons, target settings, color, size and supplemental drop down options.
- Button management requires access to (and basic understanding of) html code. Contact your Web Coordinator if you need this.
- Button options listed below explain basic button variations
Button Sizes
large button default button small button extra small button
Button Colors
Buttons with Dropdown Menus
Buttons with Icon on Right
Buttons with Icon on Left
Buttons with Icon in Sizes
Buttons with Icon Only
More Button Options
Gray Feature Button
Application Deadlines
Learn more about when to apply to Lower Columbia College
<a href="link">
<div class="tile-stats tile-gray">
<div class="icon"><i class="entypo-dot-3"><span class="display:none;"> </span></i></div>
<h3>Application Deadlines</h3>
<p>Learn more about when to apply to Lower Columbia College</p>
</div>
</a>
Blue Feature Button
Application Deadlines
Learn more about when to apply to Lower Columbia College
<a href="link">
<div class="tile-stats tile-blue">
<div class="icon"><i class="entypo-dot-3"><span class="display:none;"> </span></i></div>
<h3>Application Deadlines</h3>
<p>Learn more about when to apply to Lower Columbia College</p>
</div>
</a>
Red Feature Button
Application Deadlines
Learn more about when to apply to Lower Columbia College
<a href="link">
<div class="tile-stats tile-red">
<div class="icon"><i class="entypo-dot-3"><span class="display:none;"> </span></i></div>
<h3>Application Deadlines</h3>
<p>Learn more about when to apply to Lower Columbia College</p>
</div>
</a>