[WordPress] お問い合わせボタンをコピペでサッと設置したい

公開日:2018/08/30 更新日:2019/07/31

お店や企業のサイトでよくある、メールのアイコンがくっついたお問い合わせボタンをコピペでサッと設置したいということで、サンプルコードを書きました

サンプルコード

html

<a href="<?php echo esc_url(home_url('/contact/')); ?>" class="btn_contact">お問い合わせ</a>

CSS

.btn_contact {
    display: table;
    position: relative;
    padding: 1em 5em;
    border: 1px solid #3388dd;
    background-color: #3388dd;
    color: #fff;
}
.btn_contact::before {
    margin: 0px 1em 0px 0px;
    font-family: FontAwesome;
    content: "f0e0";
}
.btn_contact:link,
.btn_contact:visited,
.btn_contact:active {
    color: #fff;
}
.btn_contact:hover {
    background-color: #fff;
    color: #3388dd;
    text-decoration: none;
}

仕組み、解説、補足など

中央揃えしたいときはmargin: 0px auto;で

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

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

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