Custom Buttons

Pick your style

Default Round favorite With Icon favorite Simple 
<a href="#" class="btn btn-primary">Default</a>
<a href="#" class="btn btn-primary btn-round">Round</a>
<a href="#" class="btn btn-primary btn-round">
	<i class="material-icons">favorite</i> With Icon
</a>
<a href="#" class="btn btn-primary btn-fab btn-round">
	<i class="material-icons">favorite</i>
</a>
<a href="#" class="btn btn-primary btn-link">Simple</a>

Pick your size

Small Regular Large 
<a href="#" class="btn btn-primary btn-sm">Small</a>
<a href="#" class="btn btn-primary">Regular</a>
<a href="#" class="btn btn-primary btn-lg">Large</a>

Pick your color

Default Primary Info Success Warning Danger Rose 
<a href="#" class="btn">Default</a>
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-rose">Rose</a>

Social Buttons

Default

Connect with Twitter 
<a href="#" class="btn btn-social btn-fill btn-twitter">
	<i class="fab fa-twitter"></i> Connect with Twitter
</a>
Share · 2.2k 
<a href="#" class="btn btn-social btn-fill btn-facebook">
	<i class="fab fa-facebook-square"></i> Share · 2.2k
</a>
Share on Google+ 
<a href="#" class="btn btn-social btn-fill btn-google">
	<i class="fab fa-google-plus-square"></i> Share on Google+
</a>
Connect with Linkedin 
<a href="#" class="btn btn-social btn-fill btn-linkedin">
	<i class="fab fa-linkedin"></i> Connect with Linkedin
</a>
Pint it · 212 
<a href="#" class="btn btn-social btn-fill btn-pinterest">
	<i class="fab fa-pinterest"></i> Pint it · 212
</a>
View on Youtube 
<a href="#" class="btn btn-social btn-fill btn-youtube">
		<i class="fab fa-youtube"></i> View on Youtube
</a>
Repost 
<a href="#" class="btn btn-social btn-fill btn-tumblr">
	<i class="fab fa-tumblr-square"></i> Repost
</a>
Connect with Github 
<a href="#" class="btn btn-social btn-fill btn-github">
	<i class="fab fa-github"></i> Connect with Github
</a>
Follow us 
<a href="#" class="btn btn-social btn-fill btn-behance">
	<i class="fab fa-behance-square"></i> Follow us
</a>
Find us on Dribbble 
<a href="#" class="btn btn-social btn-fill btn-dribbble">
	<i class="fab fa-dribbble"></i> Find us on Dribbble
</a>
Repost · 232 
<a href="#" class="btn btn-social btn-fill btn-reddit">
	<i class="fab fa-reddit"></i> Repost · 232
</a>

 

<a href="#" class="btn btn-just-icon btn-twitter">
	<i class="fab fa-twitter"></i>
</a>
<a href="#" class="btn btn-just-icon  btn-facebook">
	<i class="fab fa-facebook"> </i>
</a>
<a href="#" class="btn btn-just-icon  btn-google">
	<i class="fab fa-google"> </i>
</a>
<a href="#" class="btn btn-just-icon  btn-linkedin">
	<i class="fab fa-linkedin"></i>
</a>
<a href="#" class="btn btn-just-icon  btn-pinterest">
	<i class="fab fa-pinterest"></i>
</a>
<a href="#" class="btn btn-just-icon  btn-youtube">
	<i class="fab fa-youtube"> </i>
</a>
<a href="#" class="btn btn-just-icon  btn-tumblr">
	<i class="fab fa-tumblr"> </i>
</a>
<a href="#" class="btn btn-just-icon  btn-github">
	<i class="fab fa-github"></i>
</a>
<a href="#" class="btn btn-just-icon  btn-behance">
	<i class="fab fa-behance"></i>
</a>
<a href="#" class="btn btn-just-icon  btn-dribbble">
	<i class="fab fa-dribbble"></i>
</a>
<a href="#" class="btn btn-just-icon  btn-reddit">
	<i class="fab fa-reddit"></i>
</a>

 

<a href="#" class="btn btn-just-icon btn-round btn-twitter">
	<i class="fab fa-twitter"></i>
</a>
<a href="#" class="btn btn-just-icon btn-round btn-facebook">
	<i class="fab fa-facebook"> </i>
</a>
<a href="#" class="btn btn-just-icon btn-round btn-google">
	<i class="fab fa-google"> </i>
</a>
<a href="#" class="btn btn-just-icon btn-round btn-linkedin">
	<i class="fab fa-linkedin"></i>
</a>
<a href="#" class="btn btn-just-icon btn-round btn-pinterest">
	<i class="fab fa-pinterest"></i>
</a>
<a href="#" class="btn btn-just-icon btn-round btn-youtube">
	<i class="fab fa-youtube"> </i>
</a>
<a href="#" class="btn btn-just-icon btn-round btn-tumblr">
	<i class="fab fa-tumblr"> </i>
</a>
<a href="#" class="btn btn-just-icon btn-round btn-github">
	<i class="fab fa-github"></i>
</a>
<a href="#" class="btn btn-just-icon btn-round btn-behance">
	<i class="fab fa-behance"></i>
</a>
<a href="#" class="btn btn-just-icon btn-round btn-dribbble">
	<i class="fab fa-dribbble"></i>
</a>
<a href="#" class="btn btn-just-icon btn-round btn-reddit">
	<i class="fab fa-reddit"></i>
</a>

Simple

<a href="#" class="btn btn-link btn-twitter">
	<i class="fab fa-twitter"></i>
</a>
<a href="#" class="btn btn-link btn-facebook">
	<i class="fab fa-facebook-square"> </i>
</a>
<a href="#" class="btn btn-link btn-google">
	<i class="fab fa-google"> </i>
</a>
<a href="#" class="btn btn-link btn-linkedin">
	<i class="fab fa-linkedin"></i>
</a>
<a href="#" class="btn btn-link btn-pinterest">
	<i class="fab fa-pinterest"></i>
</a>
<a href="#" class="btn btn-link btn-youtube">
	<i class="fab fa-youtube"> </i>
</a>
<a href="#" class="btn btn-link btn-tumblr">
	<i class="fab fa-tumblr-square"> </i>
</a>
<a href="#" class="btn btn-link btn-github">
	<i class="fab fa-github"></i>
</a>
<a href="#" class="btn btn-link btn-behance">
	<i class="fab fa-behance"></i>
</a>
<a href="#" class="btn btn-link btn-dribbble">
	<i class="fab fa-dribbble"></i>
</a>
<a href="#" class="btn btn-link btn-reddit">
	<i class="fab fa-reddit"></i>
</a>

 

Connect with Twitter 
<a href="#" class="btn btn-link btn-twitter">
	<i class="fab fa-twitter"></i> Connect with Twitter
</a>
Share · 2.2k 
<a href="#" class="btn btn-link btn-facebook">
	<i class="fab fa-facebook-square"></i> Share · 2.2k
</a>
Share on Google+ 
<a href="#" class="btn btn-link btn-google">
	<i class="fab fa-google-plus-square"></i> Share on Google+
</a>
Connect with Linkedin 
<a href="#" class="btn btn-link btn-linkedin">
	<i class="fab fa-linkedin"></i> Connect with Linkedin
</a>
Pint it · 212 
<a href="#" class="btn btn-link btn-pinterest">
	<i class="fab fa-pinterest"></i> Pint it · 212
</a>
View on Youtube 
<a href="#" class="btn btn-link btn-youtube">
	<i class="fab fa-youtube"></i> View on Youtube
</a>
Repost 
<a href="#" class="btn btn-link btn-tumblr">
	<i class="fab fa-tumblr-square"></i> Repost
</a>
Connect with Github 
<a href="#" class="btn btn-link btn-github">
	<i class="fab fa-github"></i> Connect with Github
</a>
Follow us 
<a href="#" class="btn btn-link btn-behance">
	<i class="fab fa-behance-square"></i> Follow us
</a>
Find us on Dribbble 
<a href="#" class="btn btn-link btn-dribbble">
	<i class="fab fa-dribbble"></i> Find us on Dribbble
</a>
Repost · 232 
<a href="#" class="btn btn-link btn-reddit">
	<i class="fab fa-reddit"></i> Repost · 232
</a>

"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