<a href="#" title="Sauver et continuer link to somewhere" class="btn btn-dark">Sauver et continuer</a>
<a href="{{ href }}"
{%- if title %}title="{{ text }} {{ title }}"{% endif -%}
class="{{ class }}"
{% if attributes %}
{% for attribute, value in attributes %}
{{ attribute }}="{{ value }}"
{% endfor %}
{% endif %}>
{%- if iconBefore %} <span class="fa {{ iconBefore }}" aria-hidden="true"></span> {% endif -%}
{{ text }}
{%- if iconAfter %} <span class="fa {{ iconAfter }}" aria-hidden="true"></span>
{% endif -%}
</a>
{
"text": "Sauver et continuer",
"href": "#",
"title": "link to somewhere"
}
@charset 'UTF-8';
// Override normalize.css – because setting the font-family on `body` is not
// specific enough for those tags
button,
input,
optgroup,
select,
textarea {
font-family: $font-family-base;
}
button {
border-radius: 0;
}
.btn-block {
display: flex;
justify-content: center;
.fa {
align-self: center;
padding-left: $spacer;
}
}
/**
* Button
*/
.btn {
white-space: normal;
padding-top: $input-btn-padding-y * 1.1;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
/**
* Fontawesome icons inside button
*
* 1. Icons inside a button are green
* 2. Icons inside a secondary or success button are white
*/
.fab,
.fas,
.fa,
.far,
.fal,
.svg-inline--fa {
color: $vd-primary; /* [1] */
}
&.btn-secondary,
&.btn-success {
.fab,
.fas,
.fa,
.far,
.fal,
.svg-inline--fa {
color: $white; /* [2] */
}
}
&:hover {
cursor: pointer;
}
&:focus {
@include box-shadow($input-btn-focus-box-shadow);
}
@media print {
display: none;
}
}
a.btn {
text-decoration: none;
}
.btn-sm {
padding-top: $input-btn-padding-y-sm * 2;
padding-bottom: $input-btn-padding-y-sm * 2;
font-size: $font-size-base * 0.8;
}
.btn-link {
font-weight: bold;
&:hover {
text-decoration: none;
color: $link-hover-color;
}
}
@charset 'UTF-8';
/**
* 1. Overrides Bootstrap behavior: it's broken in IE if we don't specify
* shrink and basis value.
*/
.input-group-btn {
> .btn {
flex: 1 1 auto; /* [1] */
padding: ($input-btn-padding-y * 0.8) $input-btn-padding-x;
box-shadow: none;
}
}
You can add a chevron icon by adding the class .vd-btn-chevron-t|r|b|l to the button and choose the direction of the chevron by setting t(top), r(right), b(bottom) or l(left).