<a href="#" class="eds_btn">Default</a>
<a href="#" class="eds_btn eds_btnSecondary">Secondary</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>
<a href="#" class="eds_btn eds_btnDark">Dark</a>
<a href="#" class="eds_btn eds_btnWhite">White</a>
<a href="#" class="eds_btn eds_btnSuccess eds_btnWhite">Success White</a>
<a href="#" class="eds_btn eds_btnInfo eds_btnWhite">Info White</a>
<a href="#" class="eds_btn eds_btnWarning eds_btnWhite">Warning White</a>
<a href="#" class="eds_btn eds_btnDanger eds_btnWhite">Danger White</a>
<a href="#" class="eds_btn eds_small">Small Default</a>
<a href="#" class="eds_btn eds_btnSecondary eds_small">Small Secondary</a>
<a href="#" class="eds_btn eds_btnSuccess eds_small">Small Success</a>
<a href="#" class="eds_btn eds_btnInfo eds_small">Small Info</a>
<a href="#" class="eds_btn eds_btnWarning eds_small">Small Warning</a>
<a href="#" class="eds_btn eds_btnDanger eds_small">Small Danger</a>
<a href="#" class="eds_btn eds_btnDark eds_small">Small Dark</a>
<a href="#" class="eds_btn eds_btnWhite eds_small">Small White</a>
<a href="#" class="eds_btn eds_btnSuccess eds_btnWhite eds_small">Small Success White</a>
<a href="#" class="eds_btn eds_btnInfo eds_btnWhite eds_small">Small Info White</a>
<a href="#" class="eds_btn eds_btnWarning eds_btnWhite eds_small">Small Warning White</a>
<a href="#" class="eds_btn eds_btnDanger eds_btnWhite eds_small">Small Danger White</a>
<a href="#" class="eds_readMore">Read More</a>
Font Awesome Buttons
<div class="eds_faButtons">
<a href="#"><span class="fab fa-twitter"></span></a>
<a href="#"><span class="fab fa-facebook"></span></a>
<a href="#"><span class="fab fa-linkedin"></span></a>
<a href="#"><span class="fab fa-instagram"></span></a>
</div>
<div class="eds_faButtons eds_invertIcons">
<a href="#"><span class="fab fa-twitter"></span></a>
<a href="#"><span class="fab fa-facebook"></span></a>
<a href="#"><span class="fab fa-linkedin"></span></a>
<a href="#"><span class="fab fa-instagram"></span></a>
</div>
<div class="eds_faButtons2">
<a href="#"><span class="fab fa-facebook-f"></span></a>
<a href="#"><span class="fab fa-linkedin-in"></span></a>
<a href="#"><span class="fab fa-twitter"></span></a>
<a href="#"><span class="fab fa-google-plus-g"></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
Linear
Moves at the same speed from start to finish.
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