[CSS] よく使うボタンリンクまとめ

公開日:2019/01/04

右矢印付きのボタン

.btn_link {
    display: table;
    position: relative;
    padding: 1em 3em 1em 3em;
    margin: 60px auto;
    background-color: #3388dd;
    color: #fff;
    text-decoration: none;
}
.btn_link:hover {
    background-color: #4499ee;
    color: #fff;
}
.btn_link::before {
    position: absolute;
    top: 50%;
    right: 1.5em;
    width: 0.5em;
    height: 0.5em;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(-50%) rotate(45deg);
    content: "";
}

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。