矢印付きボタンを作るときによく使うcss

このようなボタンです。

通常

ホバー

<a href="#" class="btn btn-small next">詳しく見る</a>

.btn {
    display: block;
    background-color: $btn-base;
    text-align: center;
    color: $bg-white;
    position: relative;
    &.btn-small {
        width: 241px;
        height: 34px;
        line-height: 36px;
        transition: all 0.2s;
        &.next {
            &:hover {
                background-color: $btn-hover;
                &:after {
                    right: 16px;
                }
            }
            &:after {
                content: "";
                position: absolute;
                top: 50%;
                right: 20px;
                @include sprite($icon-btn-arrow-back);
                transform: translateY(-50%) rotate(180deg);
                transition: all 0.2s;
            }
        }
        &.prev {
            &:hover {
                background-color: $btn-hover;
                &:after {
                    left: 16px;
                }
            }
            &:after {
                content: "";
                position: absolute;
                top: 50%;
                left: 20px;
                @include sprite($icon-btn-arrow-back);
                transform: translateY(-50%);
                transition: all 0.2s;
            }
        }
    }
}

@include spriteはbackground画像を指定するmixinです。
transformで垂直中央にして、rotateで矢印を右寄せ右向き、左寄せ左向きにしています。