Buttons

Custom Buttons

<a href="#" class="eds_btn">Default</a>
<a href="#" class="eds_btn eds_btnPrimary">Primary</a>
<a href="#" class="eds_btn eds_btnSuccess">Success</a>
<a href="#" class="eds_btn eds_btnInfo">Info</a>
<a href="#" class="eds_btn eds_btnWarning">Warning</a>
<a href="#" class="eds_btn eds_btnDanger">Danger</a>

Large size

<a href="#" class="eds_btn eds_btnLarge">Default</a>
<a href="#" class="eds_btn eds_btnPrimary eds_btnLarge">Primary</a>
<a href="#" class="eds_btn eds_btnSuccess eds_btnLarge">Success</a>
<a href="#" class="eds_btn eds_btnInfo eds_btnLarge">Info</a>
<a href="#" class="eds_btn eds_btnWarning eds_btnLarge">Warning</a>
<a href="#" class="eds_btn eds_btnDanger eds_btnLarge">Danger</a>

Font Awesome Buttons

<div class="eds_faButtons">
<a href="facebook.com"><span class="fa fa-facebook-square"></span></a><a href="twitter.com"><span class="fa fa-twitter-square"></span></a><a href="plus.google.com"><span class="fa fa-google-plus-square"></span></a><a href="linkedin.com"><span class="fa fa-linkedin-square"></span></a><a href="pinterest.com"><span class="fa fa-pinterest-square"></span></a>
</div>

Inverted version

<div class="eds_faButtons eds_invertIcons">
<a href="facebook.com"><span class="fa fa-facebook-square"></span></a><a href="twitter.com"><span class="fa fa-twitter-square"></span></a><a href="plus.google.com"><span class="fa fa-google-plus-square"></span></a><a href="linkedin.com"><span class="fa fa-linkedin-square"></span></a><a href="pinterest.com"><span class="fa fa-pinterest-square"></span></a>
</div>

"Scroll to ..." Buttons

Default usage

Example link

<a class="eds_scrollTo" href="#exampleID">Example link</a>

<a class="eds_scrollTo eds_scrollToButton eds_scrollDown" href="#exampleID"><span>Example Link</span></a>

<a class="eds_scrollTo eds_scrollToButton eds_scrollDown eds_small" href="#exampleID"><span>Example Link</span></a>

<a class="eds_scrollTo eds_scrollToButton eds_scrollUp" href="#"><span>Example Link</span></a>

<a class="eds_scrollTo eds_scrollToButton eds_scrollUp eds_small" href="#"><span>Example Link</span></a>

Advanced (data-options attribute)

Use the HTML editor in the "Basic text" mode (HTML render mode) because some editors can switch " (double quotes) or ' (single qoute) signs to the "Rich text" mode.

<a class="eds_scrollTo eds_scrollToButton eds_scrollDown" href="#exampleID" data-options='{ "offset": 500,"speed": 700,"easing": "easeOutQuint","updateURL": false }'><span>Example Link</span></a>

<a class="eds_scrollTo eds_scrollToButton eds_scrollDown eds_small" href="#exampleID" data-options='{ "offset": 500,"speed": 700,"easing": "easeOutQuint","updateURL": false }'><span>Example Link</span></a>

<a class="eds_scrollTo eds_scrollToButton eds_scrollUp" href="#" data-options='{ "offset": 500,"speed": 700,"easing": "easeOutQuint","updateURL": false }'><span>Example Link</span></a>

<a class="eds_scrollTo eds_scrollToButton eds_scrollUp eds_small" href="#" data-options='{ "offset": 500,"speed": 700,"easing": "easeOutQuint","updateURL": false }'><span>Example Link</span></a>

Options

• "speed": 700 // How fast to complete the scroll in milliseconds
• "easing": "easeOutQuint" // Easing pattern to use
• "offset": 500 // How far to offset the scrolling anchor location in pixels
• "updateURL": false // If true, change link in browser window address bar
• "scrollOnLoad": true, // If true, animate to anchor on page load if URL has a hash

Easing Options

LinearMoves at the same speed from start to finish.

• Linear

Ease-In Gradually increases in speed.

• easeInQuad
• easeInCubic
• easeInQuart
• easeInQuint

Ease-In-Out Gradually increases in speed, peaks, and then gradually slows down.

• easeInOutQuad
• easeInOutCubic
• easeInOutQuart
• easeInOutQuint

Ease-Out Gradually decreases in speed.

• easeOutQuad
• easeOutCubic
• easeOutQuart
• easeOutQuint

DNN Buttons

PrimaryAction

SecondaryAction

TertiaryAction

<a class="dnnPrimaryAction" href="#">PrimaryAction</a>
<a class="dnnSecondaryAction" href="#">SecondaryAction</a></p>
<a href="#" class="dnnTertiaryAction">TertiaryAction</a>

Bootstrap Buttons

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Sizes

Large button Large button

Default button Default button

Small button Small button

Extra small button Extra small button

<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Active state

Button element

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Anchor element

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Disabled state

Button element

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Anchor element

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Button tags

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Button groups

Basic example

<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>

Button toolbar

<div class="btn-toolbar" role="toolbar">
<div class="btn-group">...</div>
<div class="btn-group">...</div>
<div class="btn-group">...</div>
</div>

Sizing

<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>

Nesting

<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>

<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>

Vertical variation

<div class="btn-group-vertical">
...
</div>

Justified button groups

With <a> elements

<div class="btn-group btn-group-justified">
...
</div>

With <button> elements

<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>

Button dropdowns

Single button dropdowns

<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

Split button dropdowns

<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

Sizing

<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>

<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>