<!-- Default -->
<a class="c-button" href="#">
Default Button
</a>
<!-- Secondary -->
<a class="c-button c-button--secondary" href="#">
Secondary Button
</a>
<!-- Disabled -->
<a class="c-button c-button--disabled" href="#">
Disabled Button
</a>
<!-- Ghost -->
<a class="c-button c-button--ghost" href="#">
Ghost Button
</a>
<!-- Default -->
<a class="c-button{% if additionalClasses %} {{ additionalClasses }}{% endif %}" href="#">
{{ text }}
</a>
<!-- Secondary -->
<a class="c-button c-button--secondary{% if additionalClasses %} {{ additionalClasses }}{% endif %}" href="#">
{{ text }}
</a>
<!-- Disabled -->
<a class="c-button c-button--disabled{% if additionalClasses %} {{ additionalClasses }}{% endif %}" href="#">
{{ text }}
</a>
<!-- Ghost -->
<a class="c-button c-button--ghost{% if additionalClasses %} {{ additionalClasses }}{% endif %}" href="#">
{{ text }}
</a>
/* Default */
{
"text": "Default Button",
"additionalClasses": ""
}
/* Secondary */
{
"text": "Secondary Button",
"additionalClasses": ""
}
/* Disabled */
{
"text": "Disabled Button",
"additionalClasses": ""
}
/* Ghost */
{
"text": "Ghost Button",
"additionalClasses": ""
}
.c-button {
background-color: $color-yellow;
border: 1px solid $color-yellow;
border-radius: $border-radius;
color: $color-black;
cursor: pointer;
display: inline-block;
font-weight: $font-weight-bold;
padding: .625rem;
text-decoration: none;
@include transition(background-color, border, color, box-shadow);
&:active,
&:focus,
&:hover {
background-color: $color-black;
border-color: $color-black;
color: $color-white;
}
&:focus {
box-shadow: 0 0 3px 3px rgba(0, 0, 0, .2);
outline: none;
}
&--secondary {
background-color: $color-white;
border-color: $color-black;
color: $color-black;
&:active,
&:focus,
&:hover {
background-color: $color-white;
border-color: $color-grey-lighter;
color: $color-black;
}
}
&--disabled {
background-color: $color-white;
border-color: $color-grey-lighter;
color: $color-grey;
cursor: not-allowed;
&:active,
&:focus,
&:hover {
background-color: $color-white;
border-color: $color-grey-lighter;
color: $color-grey;
outline: none;
}
}
&--ghost {
background-color: transparent;
border-color: $color-black;
}
&--shrink {
padding: .625rem 1.25rem;
}
&--full {
display: block;
text-align: center;
width: 100%;
}
}
Add notes here…