Theme-Logo
    • Notifications
    • Generic placeholder image
      John Doe

      Lorem ipsum dolor sit amet, consectetuer elit.

      30 minutes ago
    • Generic placeholder image
      Joseph William

      Lorem ipsum dolor sit amet, consectetuer elit.

      30 minutes ago
    • Generic placeholder image
      Sara Soudein

      Lorem ipsum dolor sit amet, consectetuer elit.

      30 minutes ago
  • User-Profile-Image John Doe
    • Settings
    • Profile
    • My Messages
    • Lock Screen
    • Logout
User-Profile-Image
John Doe UX Designer
  • View Profile Settings Logout
Layout
  • D Dashboard
  • Components
    • Accordion
    • Breadcrumbs
    • Button
    • Tabs
    • Color
    • Label Badge
    • Tooltip
    • Typography
    • Notification
    • Icon
Forms & Tables
  • FC Form Components
  • FC Basic Table
Chart & Maps
  • FC Chart
  • FC Maps
  • Pages
    • Login
    • Register
    • Sample Page
Other
  • M Menu Levels
    • Menu Level 2.1
    • Menu Level 2.2
      • Menu Level 3.1
    • Menu Level 2.3

Buttons

lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Basic Componenets
  • Button
Color States

Checkout color states of all buttons on popover to buttons

Basic Buttons

Use the button classes on an <a>, <button>, or <input> element.

Rounded buttons

Add .btn-round to default button to get rounded corners.

Square Buttons

Add .btn-square to default button to get square corners.

Skew Buttons

Add .btn-skew to default button to get skew Buttons.

inner border

Use Class .btn-out inside button to make inner solid Border Button.

Use Class .btn-out-dashed inside button to make inner dashed Border Button.

Use Class .btn-out-dotted inside button to make inner solid dotted Button.

Gradient

Vertical gradient

Use Class .btn-grd-* inside button to make gradient Button.

Horizontal gradient

Use Class .hor-grd .btn-grd-* inside button to make horizontal gradient Button.

Matrialized

Use Class .btn-mat inside button to make matrialized Button.

Buttons With Icon

Use <i class="icofont icofont-star"> inside button to add icon.

Border Buttons

Use Class btn-outline-* inside button to make Border Button.

Buttons Dropdown
Action Another action Something else here
Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Buttons with split dropdown with icon
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Icon Button

Use <i class="icofont icofont-star"> inside button to add icon.

Icon Border Buttons

Use Class btn-outline-* inside button to make Border Button.

Group Buttons

Use btn-xlg, btn-lg, btn-md, btn-sm, btn-mini inside class to use different size button.

Social Buttons
Facebook Twitter Linkedin Dribble Google+ Instagram Pinterest Dropbox Tumbler
Social Buttons without label
Link Buttons
Link
Block Buttons
Upgrade To Pro