<!-- button -->
<button class="btn btn--primary">Button text</button>

<!-- anchor -->
<a class="btn btn--primary" href="#">Button text</a>

<!-- or input submit -->
<input class="btn btn--primary" type="submit" value="Button text" name="" id="">
<!-- button -->
<button class="btn btn--{{ modifier }}">Button text</button>

<!-- anchor -->
<a class="btn btn--{{ modifier }}" href="#">Button text</a>

<!-- or input submit -->
<input class="btn btn--{{ modifier }}" type="submit" value="Button text" name="" id ="">
{
    "modifier": "primary"
}
button {
    appearance: none;
    border: 0;
    padding: 0;
    background-color: $white;
    &:focus, 
    &:active {
        outline: none;
    }
}

.btn {
	color: black;
    display: inline-block;
    float: none;
    padding: 10px 1em;
    text-align: center;
    @include rem2px(font-size,1.4);
    line-height: 1;
    border: none;
    position: relative;
    transition-property: .2s;
    transition-timing-function: ease-out;
    appearance: none;
    background-color: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
    	text-decoration: underline;
    }
}
.btn__icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
}
.btn--primary {
	background-color: $brand--prime;
	color: white;
	&:hover {
		background-color: lighten($brand--prime,5%);
	}
}
.btn--white {
    background-color: $white;
    color: $grey--superdark;
    &:hover {
        background-color: darken($white,5%);
    }
}

.btn--secondary {
	background-color: $grey;
	color: gray;
	&:hover {
		background-color: lighten($grey,5%);
	}
}
.btn--block {
    width: 100%;
}
.btn--r-icon {
    padding-right: 2em;
}
.btn--centred {
    margin-left: auto;
    margin-right: auto;
    display: block
}
.icon--down {
    background-image: url('/assets/icons/arrow-down-grey.png');
    background-image: url('/assets/icons/arrow-down-grey.svg');
    background-repeat: no-repeat;
    background-position: center right;
    background-position-x: 97%;
    background-size: 18px;
}
    
.icon--up {
    background-image: url('/assets/icons/arrow-up-grey.png');
    background-image: url('/assets/icons/arrow-up-grey.svg');
    background-repeat: no-repeat;
    background-position: center right;
    background-position-x: 97%;
    background-size: 18px;
}

Denoting button styles can be used with: a 'button' *'input` type submit or file