Default 
<a href="#" class="eds_btn">Default</a>
Secondary 
<a href="#" class="eds_btn eds_btnSecondary">Secondary</a>
Success 
<a href="#" class="eds_btn eds_btnSuccess">Success</a>
Info 
<a href="#" class="eds_btn eds_btnInfo">Info</a>
Warning 
<a href="#" class="eds_btn eds_btnWarning">Warning</a>
Danger 
<a href="#" class="eds_btn eds_btnDanger">Danger</a>
Dark 
<a href="#" class="eds_btn eds_btnDark">Dark</a>
White 
<a href="#" class="eds_btn eds_btnWhite">White</a>
Success White 
<a href="#" class="eds_btn eds_btnSuccess eds_btnWhite">Success White</a>
Info White 
<a href="#" class="eds_btn eds_btnInfo eds_btnWhite">Info White</a>
Warning White 
<a href="#" class="eds_btn eds_btnWarning eds_btnWhite">Warning White</a>
Danger White 
<a href="#" class="eds_btn eds_btnDanger eds_btnWhite">Danger White</a>
Small Default 
<a href="#" class="eds_btn eds_small">Small Default</a>
Small Secondary 
<a href="#" class="eds_btn eds_btnSecondary eds_small">Small Secondary</a>
Small Success 
<a href="#" class="eds_btn eds_btnSuccess eds_small">Small Success</a>
Small Info 
<a href="#" class="eds_btn eds_btnInfo eds_small">Small Info</a>
Small Warning 
<a href="#" class="eds_btn eds_btnWarning eds_small">Small Warning</a>
Small Danger 
<a href="#" class="eds_btn eds_btnDanger eds_small">Small Danger</a>
Small Dark 
<a href="#" class="eds_btn eds_btnDark eds_small">Small Dark</a>
Small White 
<a href="#" class="eds_btn eds_btnWhite eds_small">Small White</a>
Small Success White 
<a href="#" class="eds_btn eds_btnSuccess eds_btnWhite eds_small">Small Success White</a>
Small Info White 
<a href="#" class="eds_btn eds_btnInfo eds_btnWhite eds_small">Small Info White</a>
Small Warning White 
<a href="#" class="eds_btn eds_btnWarning eds_btnWhite eds_small">Small Warning White</a>
Small Danger White 
<a href="#" class="eds_btn eds_btnDanger eds_btnWhite eds_small">Small Danger White</a>
Read More 
<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>
Example Link
Example Link
Example Link
Example Link 
<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.

Example Link
Example Link
Example Link
Example Link 
<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.

  • 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
GET SOCIAL
ABOUT US

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.