Primary buttons are used for main calls to action.
<a class="btn btn-primary" href="#">Brides</a>
Disabled state
<button class="btn btn-primary" disabled>Brides</button>
or as a link:
<a class="btn btn-primary disabled" href="#">Brides</a>
One button with full width
<a class="btn btn-primary col-xs-12" href="#">Brides</a>
two buttons, side by side
<div class="row-col-xs-6 row">
<div class="col-xs-6 col-lg-12">
<a class="btn btn-primary btn-block" href="#">Brides</a>
</div>
<div class="col-xs-6 col-lg-12">
<a class="btn btn-primary btn-block" href="#">Brides</a>
</div>
</div>
One button with full width
<a class="btn btn-primary btn-block" href="#">Brides</a>
Alternate buttons can be used with primary buttons to create hierarchy for a secondary action, or, as the primary button on a case by case basis.
<a class="btn btn-alternate" href="#">Brides</a>
NOTE: For responsive version add .responsive class to the anchor tag.
<a class="btn btn-alternate favorite" data-toggle="favorites"><span class="icon"></span><span class="name">FAVORITE</span></a>
<a class="btn btn-alternate favorite heart" data-toggle="favorites">
<span class="icon"></span>
</a>
<a class="btn btn-alternate favorite"><span class="icon"></span><span class="name">FAVORITE</span></a>
<a class="btn btn-alternate favorited"><span class="icon"></span><span class="name">FAVORITED</span></a>
<a class="content link" href="http://www.theknot.com">More information</a>
More/Less Content can also use buttons in place of links.
To load inline, buttons should:
To load on a new page, buttons should:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus et Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus et Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<div class="more-less-container">
<p class="content short">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus et
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus et
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua.
</p>
<div class="more-less more" data-toggle="more-less">
<span class="icon"></span>
<span class="name">more</span>
</div>
</div>
If you want to override responsiveness, you can specify with classes
.more-less-md
or
.more-less-lg
For example:
<div class="more-less more-less-lg more">
<span class="icon"></span>
<span class="name">more</span>
</div>
<a class="back-to-top" href="#">
<span class="icon icon-general-caret-up"></span>
<span>back to top</span>
</a>