Buttons

Canvas ships its own button shortcode built on the .button class, separate from Bootstrap's .btn. It gives you a base pill/square button with size, color, shape, and effect modifiers that all stack together, plus icon, 3D, border, and reveal styles.

Structure

.button : base button class, applies to any <a> or <button>.
.button-mini, .button-small, .button-large, .button-xlarge : size modifiers (default sits between small and large).
.button-rounded : soft rounded corners.
.button-circle : full pill (50rem) radius.
.button-3d : rounded button with an inset bottom shadow for a raised look.
.button-border : transparent fill with a solid border, inverts on hover.
.button-fill : adds a fill-on-hover sweep (pair with a .fill-from-* direction).
.button-light : light background variant with dark text.
.button-dark : dark background variant.
.button-desc : two-line button with a small <span> description below the label.
.button-reveal : hides the icon off-screen and slides it in on hover.
Color modifiers: .button-red, .button-teal, .button-yellow, .button-green, .button-brown, .button-aqua, .button-lime, .button-purple, .button-leaf, .button-pink, .button-blue, .button-dirtygreen, .button-amber, .button-black, .button-white.

Markup

<a href="#" class="button">Default Button</a>
<a href="#" class="button button-rounded">Rounded</a>
<a href="#" class="button button-3d button-rounded">3D Button</a>
<a href="#" class="button button-border">Bordered</a>

<a href="#" class="button button-large button-rounded button-teal">Large Teal</a>
<a href="#" class="button button-small button-rounded button-red">Small Red</a>
<a href="#" class="button button-mini button-rounded button-yellow button-light">Mini Yellow</a>

Variants

Icon buttons

Add a Bootstrap Icons <i> before the label. The base style spaces the icon automatically. Use text-end to push the icon to the right of the text.

<a href="#" class="button button-rounded"><i class="bi-download"></i>Download</a>
<a href="#" class="button button-rounded button-border text-end">Next<i class="bi-arrow-right"></i></a>

Reveal buttons

.button-reveal keeps the icon hidden until hover, then slides it in from the edge. Wrap the label in a <span>.

<a href="#" class="button button-large button-rounded button-reveal button-dark">
    <i class="bi-cart"></i><span>Add to Cart</span>
</a>

Description buttons

.button-desc renders a larger icon, a bold main line, and a smaller <span> sub-line.

<a href="#" class="button button-desc button-rounded button-dark">
    <i class="bi-apple"></i>
    <div>App Store<span>Download Now</span></div>
</a>

Tips

Modifiers stack freely: button button-3d button-large button-rounded button-red is valid.
.button-light is meant to pair with a light color (like .button-yellow or .button-white) so the dark text stays readable.
The .button shortcode already carries a margin: 5px, so grouped buttons space themselves without extra utilities.

Code Snippets

Building Canvas Buttons by Hand

Canvas buttons are plain markup: apply the base .button class to an <a> (or <button>), then add size, shape, colour and effect modifier classes. Everything below comes from the real button classes, so you can compose any button by hand.

Basic button:

<a href="#" class="button">Default Button</a>

Sizes:

<a href="#" class="button button-mini">Mini</a>
<a href="#" class="button button-small">Small</a>
<a href="#" class="button button-large">Large</a>
<a href="#" class="button button-xlarge">XLarge</a>
<a href="#" class="button button-desc">Title<span>with description</span></a>

Shapes and styles:

<a href="#" class="button button-rounded">Rounded</a>
<a href="#" class="button button-3d">3D</a>
<a href="#" class="button button-border">Bordered</a>
<a href="#" class="button button-border button-fill">Border Fill on Hover</a>
<a href="#" class="button button-circle">Circle</a>

Colours (named palette):

<a href="#" class="button button-red">Red</a>
<a href="#" class="button button-blue">Blue</a>
<a href="#" class="button button-green">Green</a>
<a href="#" class="button button-teal">Teal</a>
<a href="#" class="button button-purple">Purple</a>
<a href="#" class="button button-amber">Amber</a>
<a href="#" class="button button-leaf">Leaf</a>
<a href="#" class="button button-brown">Brown</a>
<a href="#" class="button button-dark">Dark</a>
<a href="#" class="button button-light">Light</a>
<a href="#" class="button button-white">White</a>

(Also available: button-aqua, button-lime, button-pink, button-black, button-dirtygreen, button-yellow.)

Effects (hover reveals, icon/text flips):

<!-- icon slides in on hover -->
<a href="#" class="button button-icon-effect button-icon-flip-y"><i class="bi-arrow-right"></i>Continue</a>

<!-- text flips on hover -->
<a href="#" class="button button-3d button-text-effect button-text-flip-y">Get Canvas</a>

<!-- reveal style with an icon on one side -->
<a href="#" class="button button-circle button-xlarge button-reveal text-end">
    <i class="bi-arrow-right"></i><span>Reveal</span>
</a>

<!-- soft shadow -->
<a href="#" class="button button-shadow">Shadow</a>

Notes:

Combine freely: size + shape + colour + effect, for example button button-large button-rounded button-blue button-3d.
Remove the default bottom margin with the Bootstrap m-0 utility where needed.
To customize colours or sizes globally, edit sass/shortcodes/_buttons.scss and recompile style.css.
Use the Canvas .button classes (not Bootstrap .btn) so the styling matches the rest of the template.

Was this page helpful?