Button: Default

<style>
    /* Button with Arrow */

    .button.arrow::after,
    .button-outline.arrow::after {
        content: "\f054";
        font-family: FontAwesome;
        color: currentColor;
        font-size: .75rem;
        vertical-align: middle;
        left: .5rem;
        position: relative;
        transition: .2s ease;
    }
    /* Default Arrow */

    .button.arrow,
    .button-outline.arrow {
        padding-right: 2.5rem;
    }

    .button.arrow:hover::after,
    .button-outline.arrow:hover::after {
        left: 1rem;
    }
    /* Tiny Arrow */

    .button.arrow.tiny,
    .button-outline.arrow.tiny {
        padding-right: 1.75rem;
    }

    .button.arrow.tiny::after,
    .button-outline.arrow.tiny::after {
        font-size: .475rem;
        top: -1px;
        left: .35rem;
    }

    .button.arrow.tiny:hover::after,
    .button-outline.arrow.tiny:hover::after {
        left: .75rem;
    }
    /* Small Arrow */

    .button.arrow.small,
    .button-outline.arrow.small {
        padding-right: 2.25rem;
    }

    .button.arrow.small::after,
    .button-outline.arrow.small::after {
        font-size: .675rem;
        left: .365rem;
    }

    .button.arrow.small:hover::after,
    .button-outline.arrow.small:hover::after {
        left: .875rem;
    }
    /* Large Arrow */

    .button.arrow.large,
    .button-outline.arrow.large {
        padding-right: 2.75rem;
    }

    .button.arrow.large::after,
    .button-outline.arrow.large::after {
        font-size: .875rem;
        left: .5rem;
    }

    .button.arrow.large:hover::after,
    .button-outline.arrow.large:hover::after {
        left: 1.075rem;
    }
</style>

<a class="button arrow " href="/free-estimate.html">button</a>