<a href="#" class="button--task">Complete the form</a>
<a href="#" class="{{modifier}}">{{button-text}}</a>
{
"button-text": "Complete the form",
"modifier": "button--task"
}
.button--task {
@extend .button;
background-image: url("../images/single-chevron-right.png");
background-repeat: no-repeat;
background-position: 97% 50%;
line-height: 1;
font-size: 1.4em;
padding-left: 1em;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 3em;
}
Primarily for “Starting a task” actions