Keep The West End Whole > Pages > Features > Short Codes

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>

<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

<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

<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