Buttons

Blue Web added some button variants to Bootstrap’s default button styles. These variants are designed to be used in conjunction with the default Bootstrap button classes.

`.blue-btn-soft-*`

Code

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

`.blue-btn-plain-*`

A plain variant of Bootstrap’s buttons. Always use together with .btn!

Code

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

Button with icon

Blue Web enhances Bootstrap’s icon link helper with the .blue-btn-icon-wrapper class, enabling icons to be wrapped in a span element. This simplifies the integration for Blue React and Blue Blazor by allowing icons to be passed as props more easily.

Code

<button type="button" class="btn blue-btn-soft-secondary icon-link icon-link-hover">
    Hover me!
    <span class="blue-btn-icon-wrapper" aria-hidden="true"
        ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10240 10240">
            <path
                d="M1634 3023l3200-1600c186-93 386-93 572 0l3200 1600c222 111 354 324 354 573v3688c0 249-132 462-354 573L5406 9457c-186 93-386 93-572 0L1634 7857c-222-111-354-324-354-573V3596c0-249 132-462 354-573zm286 853v3408l2880 1440V5316L1920 3876zm5968-496L5120 1996 2352 3380l2768 1384 2768-1384z"
            ></path></svg
    ></span>
</button>

Button with icon only

Use .icon-link together with .blue-btn-square to adjust the padding, so the button is a square.

Code

<button type="button" class="btn blue-btn-soft-secondary icon-link blue-btn-square">
    <span class="visually-hidden">Hover me!</span>
    <span class="blue-btn-icon-wrapper" aria-hidden="true"
        ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10240 10240">
            <path
                d="M1634 3023l3200-1600c186-93 386-93 572 0l3200 1600c222 111 354 324 354 573v3688c0 249-132 462-354 573L5406 9457c-186 93-386 93-572 0L1634 7857c-222-111-354-324-354-573V3596c0-249 132-462 354-573zm286 853v3408l2880 1440V5316L1920 3876zm5968-496L5120 1996 2352 3380l2768 1384 2768-1384z"
            ></path></svg
    ></span>
</button>

Edit post on GitHub