Button Colors
Toggle example guides Toggle HTML markup
Le bouton existe en deux couleurs.
Le bouton standard basé sur la couleur accent
Le bouton du CTA principal basé sur la couleur lead
Chaque couleur est décliné en 4 styles, normal, bold, text et outline
.blk-button--text
Couleur
accent texte uniquement
<insert-markup>components.button.colors-1</insert-markup>
.blk-button--outline
Couleur
accent texte et bordure
<insert-markup>components.button.colors-2</insert-markup>
.blk-button--lead-bold
Couleur
lead franche.
<insert-markup>components.button.colors-4</insert-markup>
.blk-button--lead-text
Couleur
lead texte uniquement
<insert-markup>components.button.colors-5</insert-markup>
Markup: ../../../snippets/components/button.hbs
<div class="blk-button {{modifier_class}}">
<button type="button" id="navSheetTrigger" class="button blk-button__link tab-mobile-bottom-toggle"
aria-label="Open navigation menu" aria-controls="navSheet" aria-expanded="false">
<span class="ico blk-button__icon" aria-hidden="true">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-menu" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<line x1="4" y1="8" x2="20" y2="8"></line>
<line x1="4" y1="16" x2="20" y2="16"></line>
</svg>
</span>
<span class="txt blk-button__label">
<span>Menu</span>
</span>
<span class="txt blk-button__tooltip">
<span>Tooltip text</span>
</span>
</button>
</div>
<div class="blk-button {{modifier_class}}">
<a href="tel:" class="button blk-button__link">
<span class="ico blk-button__icon" aria-hidden="true">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-phone-outgoing" width="24" height="24" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2">
</path>
<line x1="15" y1="9" x2="20" y2="4"></line>
<polyline points="16 4 20 4 20 8"></polyline>
</svg>
</span>
<span class="txt blk-button__label">
<span class="lg:show">0800.949.848</span>
<span class="lg:hide">Call</span>
</span>
</a>
</div>
<div class="blk-button {{modifier_class}}">
<a href="#" class="button blk-button__link">
<span class="txt blk-button__label">
<span>Button text</span>
</span>
</a>
</div>
Source:
src/cssframework_v2/less/components/button.less, line 649