Morioh Responsive Template with Bootstrap 4, HTML5 and Vue.js

Default Buttons

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

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>

Outline Buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-link">Link</button>

Sizes

Add .btn-lg, .btn-sm for additional sizes.

<button type="button" class="btn btn-sm btn-primary">Small</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-lg btn-primary">Large Button</button>

Icons

<button type="button" class="btn btn-primary">
    <i class="mdi mdi-heart-outline"></i>
</button>
<button type="button" class="btn btn-success">
    <i class="mdi mdi-heart"></i>
</button>
<button type="button" class="btn btn-warning">
    <i class="mdi mdi-map-marker"></i>
</button>

<button type="button" class="btn btn-danger">
    <i class="mdi mdi-close"></i>
</button>

<button type="button" class="btn btn-info">
    <i class="mdi mdi-settings"></i>
</button>

<button type="button" class="btn btn-primary">
    <i class="mdi mdi-share-variant"></i> Share
</button>

<button type="button" class="btn btn-primary">
    <i class="mdi mdi-heart-outline"></i> Like
</button>

Brands

Circle Buttons

Use a classes btn btn-circle btn-success to quickly create a General btn.

<div class="mb-15">
<button type="button" class="btn btn-primary btn-circle">
    <i class="mdi mdi-heart-outline"></i>
</button>

<button type="button" class="btn btn-success btn-circle">
    <i class="mdi mdi-heart"></i>
</button>
<button type="button" class="btn btn-warning btn-circle">
    <i class="mdi mdi-map-marker"></i>
</button>

<button type="button" class="btn btn-danger btn-circle">
    <i class="mdi mdi-close"></i>
</button>

<button type="button" class="btn btn-info btn-circle">
    <i class="mdi mdi-settings"></i>
</button>

</div>

<div class="mb-15">
<button type="button" class="btn btn-outline-primary btn-circle">
    <i class="mdi mdi-heart-outline"></i>
</button>
<button type="button" class="btn btn-outline-success btn-circle">
    <i class="mdi mdi-heart"></i>
</button>
<button type="button" class="btn btn-outline-warning btn-circle">
    <i class="mdi mdi-map-marker"></i>
</button>

<button type="button" class="btn btn-outline-danger btn-circle">
    <i class="mdi mdi-close"></i>
</button>

<button type="button" class="btn btn-outline-info btn-circle">
    <i class="mdi mdi-settings"></i>
</button>

</div>

<div class="mb-15">
<button type="button" class="btn btn-outline-primary btn-circle btn-lg">
    <i class="mdi mdi-heart-outline"></i>
</button>

<button type="button" class="btn btn-outline-primary btn-circle">
    <i class="mdi mdi-heart-outline"></i>
</button>

<button type="button" class="btn btn-outline-primary btn-circle btn-sm">
    <i class="mdi mdi-heart-outline"></i>
</button>

</div>

<div class="mb-15">
<button type="button" class="btn btn-primary btn-circle btn-lg">
    <i class="mdi mdi-heart-outline"></i>
</button>

<button type="button" class="btn btn-primary btn-circle">
    <i class="mdi mdi-heart-outline"></i>
</button>

<button type="button" class="btn btn-primary btn-circle btn-sm">
    <i class="mdi mdi-heart-outline"></i>
</button>
</div>

Block Button

Create block level buttons,with by adding add .btn-block.

<button type="button" class="btn btn-block btn-primary">
    Submit
</button>
<button type="button" class="btn btn-block btn-success">
    Submit
</button>
<button type="button" class="btn btn-block btn-outline-primary">
    Submit
</button>

Loading

<button type="button" class="btn btn-primary">
    <i class="spinner-grow spinner-grow-sm"></i> Loading...
</button>

<button type="button" class="btn btn-primary">
    <i class="spinner-border spinner-border-sm"></i> Loading...
</button>

Button Group

<div class="mb-15">
    <div class="btn-group">
        <button type="button" class="btn btn-light">Left</button>
        <button type="button" class="btn btn-light">Middle</button>
        <button type="button" class="btn btn-light">Right</button>
    </div>
</div>

<div class="mb-15">
    <div class="btn-group mb-2">
        <button type="button" class="btn btn-light">1</button>
        <button type="button" class="btn btn-primary">2</button>
        <button type="button" class="btn btn-light">3</button>
        <div class="btn-group">
            <button type="button" class="btn btn-light dropdown-toggle"
                data-toggle="dropdown" aria-expanded="false"> Goto <span
                    class="caret"></span> </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Dropdown link</a>
                <a class="dropdown-item" href="#">Dropdown link</a>
            </div>
        </div>
    </div>
</div>

<div class="mb-15">
    <div class="btn-group">
        <button type="button" class="btn btn-primary">
            <i class="fas fa-align-left"></i>
        </button>
        <button type="button" class="btn btn-primary">
            <i class="fas fa-align-center"></i>
        </button>
        <button type="button" class="btn btn-primary">
            <i class="fas fa-align-right"></i>
        </button>

        <button type="button" class="btn btn-primary">
            <i class="fas fa-indent"></i>
        </button>
        <button type="button" class="btn btn-primary">
            <i class="fas fa-outdent"></i>
        </button>

    </div>
</div>