Custom Buttons

Home/Pages/Features/Short Codes/Custom Buttons
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