John Smith

### Recent Activity

- New sale ($15)
  Admin Template
  3 min ago
- You edited the file
  Documentation.doc
  15 min ago
- Project deleted
  Line Icon Set
  4 hours ago

### Online Friends

- Danielle Jones
  Copywriter
- Thomas Riley
  Web Developer
- Betty Kelley
  Web Designer
- Melissa Rice
  Photographer
- Wayne Garcia
  Graphic Designer

### Quick Settings

Online Status

Show your status to all

Auto Updates

Keep up to date

Application Alerts

Email Notifications
SMS Notifications

API

Enable access
Sales
22.030
Balance
$4.589,00
Today
$996

- New sale! + $249
  3 min ago
- New sale! + $129
  50 min ago
- New sale! + $119
  2 hours ago
- New sale! + $499
  3 hours ago

Yesterday
$765

- New sale! + $249
  26 hours ago
- Product Purchase - $50
  28 hours ago
- New sale! + $119
  29 hours ago
- Paypal Withdrawal - $300
  37 hours ago
- New sale! + $129
  39 hours ago
- New sale! + $119
  45 hours ago
- New sale! + $499
  46 hours ago

Load More..

# Buttons

## Custom buttons styles to fulfill any design approach.

## Styles

### Default

The default button style with various colors to choose from. Prefer using 2 or max 3 button color variations in your web project to make it easier and more accesible for your users.

`btn-primary`
`btn-secondary`
`btn-success`
`btn-info`
`btn-warning`
`btn-danger`
`btn-dark`
`btn-light`

### Outline

Outline styles are also available for all previous color variations

`btn-outline-primary`
`btn-outline-secondary`
`btn-outline-success`
`btn-outline-info`
`btn-outline-warning`
`btn-outline-danger`
`btn-outline-dark`
`btn-outline-light`

### Alternate

The alternate button style offers a more subtle design style.

`btn-alt-primary`
`btn-alt-secondary`
`btn-alt-success`
`btn-alt-info`
`btn-alt-warning`
`btn-alt-danger`

## Effects

### Ripple

Inspired by Material design, adding a ripple animation on click is just a data attribute away `data-toggle="click-ripple"`

## Variations

### Small Size

You can use the class `btn-sm` to make your buttons smaller

### Large Size

You can use the class `btn-lg` to make your buttons larger

### Square

You can remove border radius from your buttons if you are looking for a sharp look by using the class `rounded-0`

### Rounded

Fully rounded buttons are available for all available button styles

### Disabled

If an action is not available in a specific state of your website/app, you can easily disable your buttons

### Icons

You can use any of the available icons in your buttons to visualize its intended action

### Be Creative

Mix any of the available classes to create the button style you want to use in your project