5678 Street, Dubai, UAE 00000
Mon-Fri, 9:00-17:00. Saturday-Sunday CLOSED
212 6788 78993, 212 3478 09088

# Buttons

#### Buttons Colors

Code Ixir use `.btn` class for default button style. Customize the color of a button using `.btn-*` and `.btn-outline-*`. You can use the following classes.

##### Solid Buttons

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

    <a class="btn-primary btn" href="#!">.btn-primary</a>
    <a class="btn-secondary btn" href="#!">.btn-secondary</a>
    <a class="btn-success btn" href="#!">.btn-success</a>
    <a class="btn-info btn" href="#!">.btn-info</a>
    <a class="btn-warning btn" href="#!">.btn-warning</a>
    <a class="btn-danger btn" href="#!">.btn-danger</a>
    <a class="btn-light btn" href="#!">.btn-light</a>
    <a class="btn-dark btn" href="#!">.btn-dark</a>

##### Outline Buttons

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

    <a class="btn-outline-primary btn" href="#!">.btn-outline-primary</a>
    <a class="btn-outline-secondary btn" href="#!">.btn-outline-secondary</a>
    <a class="btn-outline-success btn" href="#!">.btn-outline-success</a>
    <a class="btn-outline-info btn" href="#!">.btn-outline-info</a>
    <a class="btn-outline-warning btn" href="#!">.btn-outline-warning</a>
    <a class="btn-outline-danger btn" href="#!">.btn-outline-danger</a>
    <a class="btn-outline-light btn" href="#!">.btn-outline-light</a>
    <a class="btn-outline-dark btn" href="#!">.btn-outline-dark</a>

##### Inverted Buttons

.btn-outline-light.btn-outline-outline-light.btn-outline-outline-warning

    <a class="btn-light btn" href="#!">.btn-outline-light</a>
    <a class="btn-outline-light btn" href="#!">.btn-outline-outline-light</a>
    <a class="btn-outline-warning btn" href="#!">.btn-outline-outline-warning</a>

#### Buttons Sizes

Customize the size of a button using `.btn-sm` and `.btn-lg`

.btn-sm.btn.btn-lg

    <a class="btn-sm btn btn-outline-primary" href="#!">.btn-sm</a>
    <a class="btn btn-outline-primary" href="#!">.btn</a>
    <a class="btn-lg btn btn-outline-primary" href="#!">.btn-lg</a>

#### Buttons Shapes

Customize the shape of a button using `.btn` and `.rounded-pill`

.btn.rounded-pill

    <a class="btn btn-primary" href="#!">.btn</a>
    <a class="btn btn-primary rounded-pill" href="#!">.rounded-pill</a>

#### Buttons with Icon

Use `.btn-icon-left` or `.btn-icon-right` class for the icon position. For outline button, use `.btn-outline-*` . To make capsule like button, you can use`.btn-capsule` class.

.btn-icon.btn-icon.btn-icon.btn-icon
.btn-icon.btn-icon.btn-icon.btn-icon

    <a class="btn-primary btn-icon-left btn btn-icon" href="#!">
      <span class="btn-icon-wrapper">
    	<span class="fab fa-gitlab"></span>
      </span>.btn-icon</a>
    <a class="btn-primary btn-icon-right btn btn-icon" href="#!">
      <span class="btn-icon-wrapper">
    	<span class="fab fa-gitlab"></span>
      </span>.btn-icon</a>
    <a class="btn-outline-primary btn-icon-left btn btn-icon" href="#!">
      <span class="btn-icon-wrapper">
    	<span class="fab fa-gitlab"></span>
      </span>.btn-icon</a>
    <a class="btn-outline-primary btn-icon-right btn btn-icon" href="#!">
      <span class="btn-icon-wrapper">
    	<span class="fab fa-gitlab"></span>
      </span>.btn-icon</a>
    <a class="btn-primary btn-icon-left btn btn-icon rounded-pill" href="#!">
      <span class="btn-icon-wrapper">
    	<span class="fab fa-gitlab"></span>
      </span>.btn-icon
    </a>
    <a class="btn-primary btn-icon-right btn btn-icon rounded-pill" href="#!">
      <span class="btn-icon-wrapper">
    	<span class="fab fa-gitlab"></span>
      </span>.btn-icon
    </a>
    <a class="btn-outline-primary btn-icon-left btn btn-icon rounded-pill" href="#!">
      <span class="btn-icon-wrapper">
    	<span class="fab fa-gitlab"></span>
      </span>.btn-icon
    </a>
    <a class="btn-outline-primary btn-icon-right btn btn-icon rounded-pill" href="#!">
      <span class="btn-icon-wrapper">
    	<span class="fab fa-gitlab"></span>
      </span>.btn-icon
    </a>

##### Special Buttons

You can use the classes `.btn-facebook`, `.btn-twitter`, `.btn-google-plus`, `.btn-github` etc. to color buttons with their corresponding brand colors.

Join Facebook Join Twitter Join Google Plus Join Github

    <a class="btn-facebook btn btn-icon btn-icon-left" href="#!">
      <span class="btn-icon-wrapper">
    	<span class="fa-facebook-f fab"></span>
      </span>Join Facebook
    </a>
    <a class="btn-twitter btn btn-icon btn-icon-left" href="#!">
      <span class="btn-icon-wrapper">
    	<span class="fa-twitter fab"></span>
      </span>Join Twitter
    </a>
    <a class="btn-google-plus btn btn-icon btn-icon-left" href="#!">
      <span class="btn-icon-wrapper">
    	<span class="fa-google-plus-g fab"></span>
      </span>Join Google Plus
    </a>
    <a class="btn-github btn btn-icon btn-icon-left" href="#!">
      <span class="btn-icon-wrapper">
    	<span class="fa-github fab"></span>
      </span>Join Github
    </a>

##### Play Buttons

#### Buttons Group

Group a series of buttons together on a single line with the button group. Wrap a series of buttons with `.btn` in `.btn-group`

    <div class="btn-group" role="group" aria-label="Basic outlined example"><button class="btn-outline-primary btn">.btn-outline-primary</button><button class="btn-outline-primary btn">.btn-outline-primary</button><button class="btn-outline-primary btn">.btn-outline-primary</button></div>

#### Sign up for email alerts

Stay current with our latest insights

- Contact Us
- FAQ
- Privacy Policy
- Terms of Use
- Global Office
- Local Office

- ##### Linkedin

- ##### Twitter

- ##### Facebook

- ##### Google+