Menu
  1. World
    • All
    • World
      More
    1. Lifestyle
      • All
      • Arts
      • Fashion
      • Health
      • Photography
      • Recipes
      • Travel
      • Cars
      • Business
        More

        No content

        A problem occurred while loading content.

        Previous Next
      1. Fashion
        Previous Next
      2. Sport
      3. Music

        No content

        A problem occurred while loading content.

        Previous Next
      4. Events
        Previous Next
      5. Forum
      6. Maps
      7. Features
      User Menu Search
      Close

      BUTTONS

      Custom Buttons

      Default Success Info Warning Danger
      <a href="#" class="eds_btn">Default</a> <a href="#" class="eds_btn eds_btnSuccess">Success</a> <a href="#" class="eds_btn eds_btnInfo">Info</a> <a href="#" class="eds_btn eds_btnWarning">Warning</a> <a href="#" class="eds_btn eds_btnDanger">Danger</a>

      Large size

      Default Success Info Warning Danger
      <a href="#" class="eds_btn eds_btnLarge">Default</a> <a href="#" class="eds_btn eds_btnSuccess eds_btnLarge">Success</a> <a href="#" class="eds_btn eds_btnInfo eds_btnLarge">Info</a> <a href="#" class="eds_btn eds_btnWarning eds_btnLarge">Warning</a> <a href="#" class="eds_btn eds_btnDanger eds_btnLarge">Danger</a>

      Font Awesome Buttons

      <div class="eds_faButtons"> <a href="facebook.com"><span class="fa fa-facebook-square"></span></a><a href="twitter.com"><span class="fa fa-twitter-square"></span></a><a href="plus.google.com"><span class="fa fa-google-plus-square"></span></a><a href="linkedin.com"><span class="fa fa-linkedin-square"></span></a><a href="pinterest.com"><span class="fa fa-pinterest-square"></span></a> </div>

      Inverted version

      <div class="eds_faButtons eds_invertIcons"> <a href="facebook.com"><span class="fa fa-facebook-square"></span></a><a href="twitter.com"><span class="fa fa-twitter-square"></span></a><a href="plus.google.com"><span class="fa fa-google-plus-square"></span></a><a href="linkedin.com"><span class="fa fa-linkedin-square"></span></a><a href="pinterest.com"><span class="fa fa-pinterest-square"></span></a> </div>

      "Scroll to ..." Buttons

      Default usage

      Example link

      <a class="eds_scrollTo" href="#exampleID">Example link</a>
      <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.

      <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

      LinearMoves 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

      DNN Buttons

      PrimaryAction

      SecondaryAction

      TertiaryAction

      <a class="dnnPrimaryAction" href="#">PrimaryAction</a>
      <a class="dnnSecondaryAction" href="#">SecondaryAction</a></p>
      <a href="#" class="dnnTertiaryAction">TertiaryAction</a>

      Bootstrap Buttons

      <!-- Standard button --> <button type="button" class="btn btn-default">Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">Link</button>

      PrimaryAction

      SecondaryAction

      TertiaryAction

      Sizes

      <p> <button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-default btn-lg">Large button</button> </p> <p> <button type="button" class="btn btn-primary">Default button</button> <button type="button" class="btn btn-default">Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-default btn-sm">Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">Extra small button</button> <button type="button" class="btn btn-default btn-xs">Extra small button</button> </p>
      <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

      Active state

      Button element

      <button type="button" class="btn btn-primary btn-lg active">Primary button</button> <button type="button" class="btn btn-default btn-lg active">Button</button>

      Anchor element

      Primary link Link
      <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a> <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

      Disabled state

      Button element

      <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button> <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

      Anchor element

      Primary link Link
      <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a> <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

      Button tags

      Link
      <a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit">

      Button groups

      Basic example

      <div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>

      Button toolbar

      <div class="btn-toolbar" role="toolbar"> <div class="btn-group">...</div> <div class="btn-group">...</div> <div class="btn-group">...</div> </div>

      Sizing

      <div class="btn-group btn-group-lg">...</div> <div class="btn-group">...</div> <div class="btn-group btn-group-sm">...</div> <div class="btn-group btn-group-xs">...</div>

      Nesting

      <div class="btn-group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div>

      Vertical variation

      <div class="btn-group-vertical"> ... </div>

      Justified button groups

      With <a> elements


      <div class="btn-group btn-group-justified"> ... </div>

      With <button> elements

      <div class="btn-group btn-group-justified"> <div class="btn-group"> <button type="button" class="btn btn-default">Left</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">Middle</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">Right</button> </div> </div>

      Button dropdowns

      Single button dropdowns

      <!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>

      Split button dropdowns

      <!-- Split button --> <div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>

      Sizing

      <!-- Large button group --> <div class="btn-group"> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> Large button <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> ... </ul> </div> <!-- Small button group --> <div class="btn-group"> <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> Small button <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> ... </ul> </div> <!-- Extra small button group --> <div class="btn-group"> <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> Extra small button <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> ... </ul> </div>
      Terms Of UsePrivacy StatementCopyright 2024 NewsMagazine DNN/DotNetNuke/EVOQ theme Demo by EasyDNNsolutions.com
      Back To Top