Custom Buttons

<a href="#" class="eds_btn">Default</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_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>

PrimaryAction

SecondaryAction

TertiaryAction

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>