Buttons

Tiny Square Style
Button Text Button Text
Code:
<a class="button tiny" href="#">Button Text</a>
<a class="button tiny ef-button ef-hollow" href="#">Button Text</a>
Tiny Radius Style
Button Text Button Text
Code:
<a class="button tiny radius" href="#">Button Text</a>
<a class="button tiny ef-button ef-hollow radius" href="#">Button Text</a>
Tiny Round Style
Button Text Button Text
Code:
<a class="button tiny round" href="#">Button Text</a>
<a class="button tiny ef-button ef-hollow round" href="#">Button Text</a>
Small Square Style
Button Text Button Text Button Text
Code:
<a class="button small" href="#">Button Text</a>
<a class="button small ef-hollow" href="#">Button Text</a>
<a class="button small ef-button ef-hollow" href="#">Button Text</a>
Small Radius Style
Button Text Button Text Button Text
Code:
<a class="button small radius" href="#">Button Text</a>
<a class="button small ef-hollow radius" href="#">Button Text</a>
<a class="button small ef-button ef-hollow radius" href="#">Button Text</a>
Small Round Style
Button Text Button Text Button Text
Code:
<a class="button small round" href="#">Button Text</a>
<a class="button small ef-hollow round" href="#">Button Text</a>
<a class="button small ef-button ef-hollow round" href="#">Button Text</a>
Medium Square Style
Button Text Button Text Button Text
Code:
<a class="button" href="#">Button Text</a>
<a class="button ef-button ef-hollow" href="#">Button Text</a>
<a class="button medium ef-button ef-hollow" href="#">Button Text</a>
Medium Radius Style
Button Text Button Text Button Text
Code:
<a class="button radius" href="#">Button Text</a>
<a class="button ef-button ef-hollow radius" href="#">Button Text</a>
<a class="button medium ef-button ef-hollow radius" href="#">Button Text</a>
Medium Round Style
Button Text Button Text Button Text
Code:
<a class="button round" href="#">Button Text</a>
<a class="button ef-button ef-hollow round" href="#">Button Text</a>
<a class="button medium ef-button ef-hollow round" href="#">Button Text</a>
Large Square Style
Button Text Button Text
Code:
<a class="button large" href="#">Button Text</a>
<a class="button ef-button ef-hollow large" href="#">Button Text</a>
Large Radius Style
Button Text Button Text
Code:
<a class="button large radius" href="#">Button Text</a>
<a class="button ef-button ef-hollow large radius" href="#">Button Text</a>
Large Round Style
Button Text Button Text
Code:
<a class="button large round" href="#">Button Text</a>
<a class="button ef-button ef-hollow large round" href="#">Button Text</a>

Button Groups

Tiny Square Style
Small Square Style
Medium Square Style
Large Square Style
Code:
<ul class="button-group">
  <li><a href="#" class="tiny button">Button 1</a></li><li><a href="#" class="tiny button">Button 2</a></li>
</ul>
<ul class="button-group">
  <li><a href="#" class="small button">Button 1</a></li><li><a href="#" class="small button">Button 2</a></li>
</ul>
<ul class="button-group even-2">
  <li><a href="#" class="button">Button 1</a></li><li><a href="#" class="button">Button 2</a></li>
</ul>
<ul class="button-group even-2">
  <li><a href="#" class="large button">Button 1</a></li><li><a href="#" class="large button">Button 2</a></li>
</ul>
Tiny Radius Style
Small Radius Style
Medium Radius Style
Large Radius Style
Code:
<ul class="button-group radius">
  <li><a href="#" class="tiny button">Button 1</a></li><li><a href="#" class="tiny button">Button 2</a></li>
</ul>
<ul class="button-group radius">
  <li><a href="#" class="small button">Button 1</a></li><li><a href="#" class="small button">Button 2</a></li>
</ul>
<ul class="button-group radius even-2">
  <li><a href="#" class="button">Button 1</a></li><li><a href="#" class="button">Button 2</a></li>
</ul>
<ul class="button-group radius even-2">
  <li><a href="#" class="large button">Button 1</a></li><li><a href="#" class="large button">Button 2</a></li>
</ul>
Tiny Round Style
Small Round Style
Medium Round Style
Large Round Style
Code:
<ul class="button-group round">
  <li><a href="#" class="tiny button">Button 1</a></li><li><a href="#" class="tiny button">Button 2</a></li>
</ul>
<ul class="button-group round">
  <li><a href="#" class="small button">Button 1</a></li><li><a href="#" class="small button">Button 2</a></li>
</ul>
<ul class="button-group round even-2">
  <li><a href="#" class="button">Button 1</a></li><li><a href="#" class="button">Button 2</a></li>
</ul>
<ul class="button-group round even-2">
  <li><a href="#" class="large button">Button 1</a></li><li><a href="#" class="large button">Button 2</a></li>
</ul>

36 Social Buttons

Code:
<ul class="ef-soc-icons clearfix">
  <li><a href="#" class="ef-twt ef-tipsy-n" title="Twitter" data-color="#2cbbea" target="_blank"></a></li>
  <li><a href="#" class="ef-fb ef-tipsy-n" title="Facebook" data-color="#5481de" target="_blank"></a></li>
  <li><a href="#" class="ef-in ef-tipsy-n" title="LinkedIn" data-color="#459ee9" target="_blank"></a></li>
  <li><a href="#" class="ef-pin ef-tipsy-n" title="Pinterest" data-color="#e84f61" target="_blank"></a></li>
  <li><a href="#" class="ef-drb ef-tipsy-n" title="Dribbble" data-color="#ee679b" target="_blank"></a></li>
  ...
<ul>

Panels

This is a regular panel.

It has an easy to override visual style, and is appropriately subdued.

Code:
<div class="panel">
  <h4>This is a regular panel.</h4>
  <p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>

This is a callout panel.

It's a little ostentatious, but useful for important content.

Code:
<div class="panel callout radius">
  <h4>This is a callout panel.</h4>
  <p>It's a little ostentatious, but useful for important content.</p>
</div>

This is a Favea style callout panel

Button-text
Code:
<div class="panel ef-panel">
  <div class="ef-panel-inner">
    <section class="row">
      <div class="large-9 columns">
	  <h4>This is a Favea style callout panel</h4>
	</div>
	<div class="large-3 columns text-right hide-for-print">
	  <a class="button round medium ef-no-margin" href="#">Button-text</a>
	</div>
    </section>
  </div>
</div>

Use our Search Form to find what you need

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore

Go!

Or

Ask us directly

Confirm that you are a human. Move slider to the right

×
×