Loading...
  • Bonus Ui
    Mega menu
    Error Page
    • Error page 400
    • Error page 401
    • Error page 403
    • Error page 404
    • Error page 500
    • Error page 503
    Authentication
    • Login
    • Login with image
    • Login with validation
    • Sign Up
    • SignUp with image
    • SignUp with image
    Usefull Pages
    • Search Website
    • Unlock User
    • Forget Password
    • Reset Password
    • Maintenance
    • Login validation
    Email templates
    • Basic Email
    • Basic With Header
    • Ecomerce Template
    • Email Template 2
    • Ecommerce Email
    • Order Success
    Coming Soon
    • Coming-soon
    • Coming-video
    • Coming-Image
    Other Soon
    • Landing Page
    • Sample Page
  • Level Menu
    • File manager
    • Users
      • User Profile
      • User Edit
      • Users Cards
    • Kanban Board
    • Bookmark
    • Social App
  • EN
    English (US)
    Deutsch
    Español
    Français
    Português (BR)
    简体中文
    لعربية (ae)
  • 4
    • Notitications
    • Delivery processing 10 min.

    • Order Complete1 hr

    • Tickets Generated3 hr

    • Delivery Complete6 hr

    • Check all notification
    • Bookmark
  • 2
    • Shoping Bag
    • V-Neck Shawl Collar Woman's Solid T-Shirt

      Yellow(#fcb102)

      $299.00
    • V-Neck Shawl Collar Woman's Solid T-Shirt

      Yellow(#fcb102)

      $299.00
    • Order Total : $598.00
    • Go to shoping bagCheckout
    • Message Box
    • Erica Hughes

      Lorem Ipsum is simply dummy...

      58 mins ago

    • Kori Thomas

      Lorem Ipsum is simply dummy...

      1 hr ago

    • Ain Chavez

      Lorem Ipsum is simply dummy...

      32 mins ago

    • View All
  • Emay Walter

    Admin

    • Account
    • Inbox
    • Taskboard
    • Settings
    • Log in
  • Back
  • General

    Dashboards,widgets & layout.

  • Dashboard
    • Default
    • Ecommerce
  • Widgets
    • General
    • Chart
  • Page layout
    • Boxed
    • RTL
    • Dark Layout
    • Hide Nav Scroll
    • Footer Light
    • Footer Dark
    • Footer Fixed
  • Applications

    Ready to use Apps

  • Project
    • Project List
    • Create new
  • File manager
  • kanban Board
  • Ecommerce
    • Product
    • Product page
    • Product list
    • Payment Details
    • Order History
    • Invoice
    • Cart
    • Wishlist
    • Checkout
    • Pricing
  • Email
    • Email App
    • Email Compose
  • Chat
    • Chat App
    • Video chat
  • Users
    • Users Profile
    • Users Edit
    • Users Cards
  • Bookmarks
  • Contacts
  • Tasks
  • Calendar
  • Social App
  • To-Do
  • Search Result
  • Forms & Table

    Ready to use froms & tables

  • Forms
    • Form Controls
      • Form Validation
      • Base Inputs
      • Checkbox & Radio
      • Input Groups
      • Mega Options
    • Form Widgets
      • Datepicker
      • Timepicker
      • Datetimepicker
      • Daterangepicker
      • Touchspin
      • Select2
      • Switch
      • Typeahead
      • Clipboard
    • Form layout
      • Default Forms
      • Form Wizard 1
      • Form Wizard 2
      • Form Wizard 3
      • Form Wizard 4
  • Tables
    • Bootstrap Tables
      • Basic Tables
      • Sizing Tables
      • Border Tables
      • Styling Tables
      • Table components
    • Data Tables
      • Basic Init
      • Advance Init
      • Styling
      • AJAX
      • Server Side
      • Plug-in
      • API
      • Data Sources
    • Ex. Data Tables
      • Auto Fill
      • Basic Button
      • Column Reorder
      • Fixed Header
      • HTML 5 Export
      • Key Table
      • Responsive
      • Row Reorder
      • Scroller
    • Js Grid Table
  • Components

    UI Components & Elements

  • Ui Kits
    • State color
    • Typography
    • Avatars
    • helper classes
    • Grid
    • Tag & pills
    • Progress
    • Modal
    • Alert
    • Popover
    • Tooltip
    • Spinners
    • Dropdown
    • Accordion
    • Tabs
      • Bootstrap Tabs
      • Line Tabs
    • Shadow
    • Lists
  • Bonus Ui
    • Scrollable
    • Tree view
    • Bootstrap Notify
    • Rating
    • dropzone
    • Tour
    • SweetAlert2
    • Animated Modal
    • Owl Carousel
    • Ribbons
    • Pagination
    • Breadcrumb
    • Range Slider
    • Image cropper
    • Sticky
    • Basic Card
    • Creative Card
    • Tabbed Card
    • Draggable Card
    • Timeline
      • Timeline 1
      • Timeline 2
  • Builders
    • Form Builder 1
    • Form Builder 2
    • Page Builder
    • Button Builder
  • Animation
    • Animate
    • Scroll Reveal
    • AOS animation
    • Tilt Animation
    • Wow Animation
  • Icons
    • Flag icon
    • Fontawesome Icon
    • Ico Icon
    • Thimify Icon
    • Feather icon
    • Whether Icon
    • Simple line Icon
    • Material Design Icon
    • pe7 icon
    • Typicons icon
    • Ionic icon
  • Buttons
    • Default Style
    • Flat Style
    • Edge Style
    • Raised Style
    • Button Group
  • Charts
    • Apex Chart
    • Google Chart
    • Sparkline chart
    • Flot Chart
    • Knob Chart
    • Morris Chart
    • Chatjs Chart
    • Chartist Chart
    • Peity Chart
  • Forms & Table

    Ready to use froms & tables

  • Forms
    • Form Controls
      • Form Validation
      • Base Inputs
      • Checkbox & Radio
      • Input Groups
      • Mega Options
    • Form Widgets
      • Datepicker
      • Timepicker
      • Datetimepicker
      • Daterangepicker
      • Touchspin
      • Select2
      • Switch
      • Typeahead
      • Clipboard
    • Form layout
      • Default Forms
      • Form Wizard 1
      • Form Wizard 2
      • Form Wizard 3
      • Form Wizard 4
  • Tables
    • Bootstrap Tables
      • Basic Tables
      • Sizing Tables
      • Border Tables
      • Styling Tables
      • Table components
    • Data Tables
      • Basic Init
      • Advance Init
      • Styling
      • AJAX
      • Server Side
      • Plug-in
      • API
      • Data Sources
    • Ex. Data Tables
      • Auto Fill
      • Basic Button
      • Column Reorder
      • Fixed Header
      • HTML 5 Export
      • Key Table
      • Responsive
      • Row Reorder
      • Scroller
    • Js Grid Table
  • Pages

    All neccesory pages added

  • Landing page
  • Sample page
  • Internationalization
  • Starter kit
  • Others
    Error Page
    • Error 400
    • Error 401
    • Error 403
    • Error 404
    • Error 500
    • Error 503
    Authentication
    • Login Simple
    • Login with bg image
    • Login with image two
    • Login With validation
    • Login with tooltip
    • Login with sweetalert
    • Register Simple
    • Register with Bg Image
    • Register with Bg video
    • Register wizard
    • Unlock User
    • Forget Password
    • Reset Password
    • Maintenance
    Coming Soon
    • Coming Simple
    • Coming with Bg video
    • Coming with Bg Image
    Email templates
    • Basic Email
    • Basic With Header
    • Ecomerce Template
    • Email Template 2
    • Ecommerce Email
    • Order Success
  • Miscellaneous

    Bouns pages & apps

  • Gallery
    • Gallery Grid
    • Gallery Grid Desc
    • Masonry Gallery
    • Masonry with Desc
    • Hover Effects
  • Blog
    • Blog Details
    • Blog Single
    • Add Post
  • FAQ
  • Job Search
    • Cards view
    • List View
    • Job Details
    • Apply
  • Learning
    • Learning List
    • Detailed Course
  • Maps
    • Maps JS
    • Vector Maps
  • Editors
    • Summer Note
    • CK editor
    • MDE editor
    • ACE code editor
  • Knowledgebase
  • Support Ticket

Edge Buttons

  1. Buttons
  2. Edge Buttons
Default buttons
Add .btn-pill class for edge button
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-pill btn-primary">primary button</button>
<button type="button" class="btn btn-pill btn-secondary">secondary button</button>
<button type="button" class="btn btn-pill btn-success">Success button</button>
<button type="button" class="btn btn-pill btn-info">Info button</button>
<button type="button" class="btn btn-pill btn-warning">warning button</button>
<button type="button" class="btn btn-pill btn-danger">danger button</button>
<button type="button" class="btn btn-pill btn-light">light button</button> 
<!-- Cod Box Copy end -->
Large buttons
Add .btn-pill and .btn-lg class for large button
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-pill btn-primary btn-lg">primary button</button>
<button type="button" class="btn btn-pill btn-secondary btn-lg">secondary button</button>
<button type="button" class="btn btn-pill btn-success btn-lg">Success button</button>
<button type="button" class="btn btn-pill btn-info btn-lg">Info button</button>
<button type="button" class="btn btn-pill btn-warning btn-lg">warning button</button>
<button type="button" class="btn btn-pill btn-danger btn-lg">danger button</button>
<button type="button" class="btn btn-pill btn-light btn-lg">light button</button> 
<!-- Cod Box Copy end -->
Small buttons
Add .btn-pill and .btn-sm class for small button
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-pill btn-primary btn-sm">primary button</button>
<button type="button" class="btn btn-pill btn-secondary btn-sm">secondary button</button>
<button type="button" class="btn btn-pill btn-success btn-sm">Success button</button>
<button type="button" class="btn btn-pill btn-info btn-sm">Info button</button>
<button type="button" class="btn btn-pill btn-warning btn-sm">warning button</button>
<button type="button" class="btn btn-pill btn-danger btn-sm">danger button</button>
<button type="button" class="btn btn-pill btn-light btn-sm">light button</button> 
<!-- Cod Box Copy end -->
Active Buttons
Add .active for active state
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-pill btn-primary active">Active</button>
<button type="button" class="btn btn-pill btn-secondary active">Active</button>
<button type="button" class="btn btn-pill btn-success active">Active</button>
<button type="button" class="btn btn-pill btn-info active">Active</button>
<button type="button" class="btn btn-pill btn-warning active">Active</button>
<button type="button" class="btn btn-pill btn-danger active">Active</button>
<button type="button" class="btn btn-pill btn-light active txt-dark">Active</button> 
<!-- Cod Box Copy end -->
Disabled buttons
Add .disabled class or disabled="disabled" attribute for disabled button
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-pill btn-primary disabled">Disabled</button>
<button type="button" class="btn btn-pill btn-secondary disabled">Disabled</button>
<button type="button" class="btn btn-pill btn-success disabled">Disabled</button>
<button type="button" class="btn btn-pill btn-info disabled">Disabled</button>
<button type="button" class="btn btn-pill btn-warning disabled">Disabled</button>
<button type="button" class="btn btn-pill btn-danger disabled">Disabled</button>
<button type="button" class="btn btn-pill btn-light disabled">Disabled</button> 
<!-- Cod Box Copy end -->
Custom state buttons
The .btn class used with <button>, <a> and <input> elements.
Link
<!-- Cod Box Copy begin -->
<a class="btn btn-pill btn-primary" href="#" data-toggle="tooltip;" title="btn btn-primary" role="button">link</button>
<input class="btn btn-pill btn-primary" type="button" value="Input"  data-toggle="tooltip;" title="btn btn-secondary">
<input class="btn btn-pill btn-success" type="submit" value="Submit" data-toggle="tooltip" title="btn btn-success">
<button class="btn btn-pill btn-info" type="submit">Button</button> 
<!-- Cod Box Copy end -->
outline buttons
Add .btn-pill and .btn-outline-* class for button with outline
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-pill btn-outline-primary">primary button</button>
<button type="button" class="btn btn-pill btn-outline-secondary">secondary button</button>
<button type="button" class="btn btn-pill btn-outline-success">Success button</button>
<button type="button" class="btn btn-pill btn-outline-info">Info button</button>
<button type="button" class="btn btn-pill btn-outline-warning">warning button</button>
<button type="button" class="btn btn-pill btn-outline-danger">danger button</button>
<button type="button" class="btn btn-pill btn-outline-light txt-dark">light button</button>
<!-- Cod Box Copy end -->
bold Border outline buttons
Add .btn-pill and .btn-outline-*-2x class for button with bold outline
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-pill btn-outline-primary-2x">primary button</button>
<button type="button" class="btn btn-pill btn-outline-secondary-2x">secondary button</button>
<button type="button" class="btn btn-pill btn-outline-success-2x">Success button</button>
<button type="button" class="btn btn-pill btn-outline-info-2x">Info button</button>
<button type="button" class="btn btn-pill btn-outline-warning-2x">warning button</button>
<button type="button" class="btn btn-pill btn-outline-danger-2x">danger button</button>
<button type="button" class="btn btn-pill btn-outline-light-2x txt-dark">light button</button> 
<!-- Cod Box Copy end -->
outline Large buttons
Add .btn-pill,.btn-outline-* and .btn-lg class for large button
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-pill btn-outline-primary btn-lg">primary button</button>
<button type="button" class="btn btn-pill btn-outline-secondary btn-lg">secondary button</button>
<button type="button" class="btn btn-pill btn-outline-success btn-lg">Success button</button>
<button type="button" class="btn btn-pill btn-outline-info btn-lg">Info button</button>
<button type="button" class="btn btn-pill btn-outline-warning btn-lg">warning button</button>
<button type="button" class="btn btn-pill btn-outline-danger btn-lg">danger button</button>
<button type="button" class="btn btn-pill btn-outline-light btn-lg txt-dark">light button</button> 
<!-- Cod Box Copy end -->
outline small buttons
Add .btn-pill,.btn-outline-* and .btn-sm class for small button
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-pill btn-outline-primary btn-sm">primary button</button>
<button type="button" class="btn btn-pill btn-outline-secondary btn-sm">secondary button</button>
<button type="button" class="btn btn-pill btn-outline-success btn-sm">Success button</button>
<button type="button" class="btn btn-pill btn-outline-info btn-sm">Info button</button>
<button type="button" class="btn btn-pill btn-outline-warning btn-sm">warning button</button>
<button type="button" class="btn btn-pill btn-outline-danger btn-sm">danger button</button>
<button type="button" class="btn btn-pill btn-outline-light btn-sm txt-dark">light button</button> 
<!-- Cod Box Copy end -->
Outline extra small buttons
Add .btn-pill,.btn-outline-* and .btn-xs class for extra small button
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-pill btn-outline-primary btn-xs">primary button</button>
<button type="button" class="btn btn-pill btn-outline-secondary btn-xs">secondary button</button>
<button type="button" class="btn btn-pill btn-outline-success btn-xs">Success button</button>
<button type="button" class="btn btn-pill btn-outline-info btn-xs">Info button</button>
<button type="button" class="btn btn-pill btn-outline-warning btn-xs">warning button</button>
<button type="button" class="btn btn-pill btn-outline-danger btn-xs">danger button</button>
<button type="button" class="btn btn-pill btn-outline-light btn-xs txt-dark">light button</button> 
<!-- Cod Box Copy end -->
Disabled outline buttons
Add .disabled class or disabled="disabled" attribute for disabled button
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-pill btn-outline-primary disabled">Disabled</button>
<button type="button" class="btn btn-pill btn-outline-secondary disabled">Disabled</button>
<button type="button" class="btn btn-pill btn-outline-success disabled">Disabled</button>
<button type="button" class="btn btn-pill btn-outline-info disabled">Disabled</button>
<button type="button" class="btn btn-pill btn-outline-warning disabled">Disabled</button>
<button type="button" class="btn btn-pill btn-outline-danger disabled">Disabled</button>
<button type="button" class="btn btn-pill btn-outline-light disabled txt-dark">Disabled</button> 
<!-- Cod Box Copy end -->
Gradien buttons
Add .btn-pill and .btn-*-gradienclass for gradien button
<!-- Cod Box Copy begin -->
<button type="button" class="btn btn-pill btn-primary-gradien">primary button</button>
<button type="button" class="btn btn-pill btn-secondary-gradien">secondary button</button>
<button type="button" class="btn btn-pill btn-success-gradien">Success button</button>
<button type="button" class="btn btn-pill btn-info-gradien">Info button</button>
<button type="button" class="btn btn-pill btn-warning-gradien">warning button</button>
<button type="button" class="btn btn-pill btn-danger-gradien">danger button</button>
<button type="button" class="btn btn-pill btn-light-gradien.txt-dark">light button</button> 
<!-- Cod Box Copy end -->

Copyright 2020 © Cuba theme by pixelstrap