Search
× Search
Menu
  1. Home
  2. News
  3. About Us
  4. Testimonials
  5. Solutions
  6. Contact Us
    1. Features
      1. Short Codes
        1. Pricing
        2. Testimonials
        3. Tabs
        4. Accordions
        5. Boxes
        6. Custom Buttons
        7. Flip boxes
        8. Counters
        9. Circular Menu
        10. Floating Menus
        11. Animated Thumbnails
        12. Animations
        13. Thumbnails
      2. Skin Layout
        1. Containers
      3. Utilities
        1. Borders
        2. Clearfix
        3. Close icon
        4. Colors
        5. Display
        6. Embed
        7. Flex
        8. Float
        9. Image replacement
        10. Position
        11. Screenreaders
        12. Sizing
        13. Spacing
        14. Text
        15. Vertical align
        16. Visibility
      4. Content
        1. Custom Typography Elements
        2. Typography
        3. Tables
        4. Figures
        5. Images
      5. Components
        1. Alerts
        2. Badge
        3. Breadcrumb
        4. Buttons
        5. Button group
        6. Card
        7. Carousel
        8. Collapse
        9. Dropdowns
        10. Forms
        11. Input group
        12. Jumbotron
        13. List group
        14. Modal
        15. Navs
        16. Navbar
        17. Progress
        18. Scrollspy

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

Terms Of UsePrivacy StatementCopyright 2024 by DNN Corp
Back To Top