WordPressでリンクボタンの作成方法【アニメもあるよ♪】

ブログのリンクボタンで、光るアニメーション付きボタンの作り方を知りたいの

光っていると目立つよね

今回はこんな悩みを解決します！

WordPressの有料テーマ等でよくある光るリンクボタンですが、有料テーマを使わなくても光るボタン用のHTML・CSSを追加するだけで簡単に実装可能です。

本記事では、僕が作成したHTML・CSSのコードを紹介しますので、コピペするだけですぐにブログで使うことができますよ♪

記事でわかること

・リンクボタンの作成方法
・カラーバリエーションを増やす方法

記事の信頼性

筆者のかがみ（@cony_tas）はWeb/UIデザイナー歴8年になります。
ゲーム会社でさまざまなWebサイトやゲームUIを制作しています。

CONTENTS［ hide ］

01｜ WordPressでリンクボタンの作成方法
・ボタンのサンプル
・HTMLコード
・CSSコード
・ボタンが表示されるか確認
02｜最後に：WordPressでリンクボタンの作成方法

WordPressでリンクボタンの作成方法

リンクボタンのCSSを追加する前に、WordPressに子テーマを導入することをおすすめしています。

子テーマにCSSを追加することで、親テーマをアップデートしてしまってもCSSが消えることはありません。

よかったら下記の記事を参考に導入してみてください。

WordPressに子テーマを追加してCSSでカスタマイズしてみよう！

2020年3月21日

ボタンのサンプル

今回は下のようなアニメーション付きのリンクボタンを作成します。

アニメ用のクラスを外せばアニメーションを消すこともできますので、どちらでもお好きなほうをお使いください♪

リンクはこちら

HTMLコード

それでは実際にブログに実装してみましょう！

まずは、ボタンのHTMLからです。下記のコードをブログ記事中でリンクボタンを挿入したい箇所にコピペしてください。

<div class="linkBtn blue effect">
    <a href="リンクURL">リンクはこちら</a>
</div>

リンク先URLと、ボタンの文字は仮なので、お好きなものに書き換えてください。

また、ボタンのクラスですがそれぞれ以下のような役割があります。

linkBtn：ボタンの基本CSSを設定しているのでこれは外さないでください。
blue：カラーバリエーション。サンプルではblueですが、他にもyellow、red、pink、greenに変更するとボタンのカラーを変えることができます。
effect：アニメーション用クラスです。光るアニメーションが不要な方は外してください。

CSSコード

次にCSSの設定です。

下記のCSSをWordPressのカスタムCSSにコピペしてください。

記事の最初に紹介した子テーマを導入された方は、子テーマのstyle.cssにコピペして保存していただければOKです！

カスタムCSSを更新した後、追加したCSSがブラウザ上に反映されないことがあります。これはブラウザのキャッシュが原因の可能性があるので、キャッシュクリアをしてから再度確認してみてください。

.linkBtn {
    position: relative;
    width: 60%;
    margin: 20px auto;
    background: linear-gradient(to bottom, #b8b8b8, #adadad);
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 0 #a3a3a3;
    font-weight: bold;
    transition: all 200ms ease-out;
}

.linkBtn:hover {
    opacity: 0.7;
}

.linkBtn.blue {
    background: linear-gradient(to bottom, #46b2ff, #2794e2);
    border-color: #73b7f4;
    box-shadow: 0 2px 0 #167dd5;
    text-shadow: 0 0 3px #0e4ad0, 0 0 5px #0e4ad0;
}

.linkBtn.yellow {
    background: linear-gradient(to bottom, #fbe650, #ffcc2d);
    border-color: #fce87f;
    box-shadow: 0 2px 0 #e1ad1c;
    text-shadow: 0 0 3px #b16b02, 0 0 5px #b16b02;
}

.linkBtn.red {
    background: linear-gradient(to bottom, #ff5a5a, #ff2d2d);
    border-color: #fc7f7f;
    box-shadow: 0 2px 0 #d22a2a;
    text-shadow: 0 0 3px #b10202, 0 0 5px #b10202;
}

.linkBtn.pink {
    background: linear-gradient(to bottom, #ffa2c4, #ff80a1);
    border-color: #ffadc7;
    box-shadow: 0 2px 0 #db5b90;
    text-shadow: 0 0 3px #b62c51, 0 0 5px #b62c51;
}

.linkBtn.green {
    background: linear-gradient(to bottom, #5ff7e2, #19e0b6);
    border-color: #8af0d0;
    box-shadow: 0 2px 0 #4bcab9;
    text-shadow: 0 0 3px #00816e, 0 0 5px #00816e;
}

.linkBtn.effect::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 45%;
    height: 100%;
    margin: auto;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.8));
    content: "";
    transform: skew(-45deg) translateX(-100%);
    animation: btn-effect 5000ms linear 0ms infinite normal both;
}

@keyframes btn-effect {
    0% { transform: skew(-45deg) translateX(-150%); opacity: 0; }
    5% { transform: skew(-45deg) translateX(0%); opacity: 1; }
    20% { transform: skew(-45deg) translateX(250%); opacity: 0; }
    100% { transform: skew(-45deg) translateX(250%); opacity: 0; }
}

.linkBtn a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    text-decoration: none;
}