キラリと光る!リンクボタンをHTMLとCSSで作成する方法

アイキャッチ/リンクボタンカスタマイズ

今回やりたいこと
  1. リンクできるボタンを設置する
  2. そのボタンをキラッと光らせる

トップページにカテゴリーごとの新着記事を表示したので、その下にカテゴリーページへのリンクボタンを置いて、さらに光らせてみたいなと思います!

リンクボタン

リンクボタンの設置

DEMO

サンプルとして下にボタンを置いてみました。一定間隔でキラッと光るのがお分かりいただけますか?(・∇・)

See the Pen リンクボタンを光らせる by はっちゃん (@hacchan) on CodePen.

リンクボタン作成と光らせるコード

WordPressの有料テーマや無料テーマの「Cocoon」には標準でボタンが作成できる機能がついていますが、今回はどんなテーマでも使えて好きなデザインにカスタマイズできるように、

HTMLのaタグにCSSで装飾し、ボタンの様に見せる方法

をご紹介します。

HTML

HTMLでリンクを貼るには a タグを使い、このように記述します。

<a href="リンク先のURL" class="link-btn">ここにテキスト</a>

HTMLの書き方/ポイント

  1. <a href=”リンク先のURL“>←ダブルクォーテーションで囲んだ部分にリンク先のURLを書きます。
  2. <a>タグの中にCSSを適用するためのクラス(class=”link-btn”)を指定しておく(クラス名は自分で分かりやすいように変更してもOKです)
  3. <a></a>タグで挟まれた部分にボタンに表示する文字を書きます。

これでリンクの設定は終わり!この時点ではただのテキストリンクになっているので、あとはCSSでボタンのように装飾していきます。

CSS

ここではa タグをボタンのように見せるために、細かく下記の設定をしていきます。

  1. ブロック要素へ変換
    1. <a>タグはデフォルトではインライン要素なので、これをブロック要素に変換します。
  2. ボタンのデザイン
    1. 幅、高さ、色、形、はみ出た文字をどうするかなどの各種設定をします。
  3. ボタンを光らせる
    1. 光らせるためにボタンの疑似要素「::before」に白いグラデーションの背景を設定し、アニメーションで「position」を移動させてキラッとした光を出しています。
  4. ボタンの中にアイコンをつける
  5. ホバーアクションをつける

(※アイコンとホバーアクションをつけるときは後述のコードを追加します)

コードはこちらです
/***リンクボタンの設定***/
.link-btn{
 display: block;/*ブロック要素にする*/
 position: relative;
 width: 95%;/*ボタンの幅*/
 padding: 10px;/*ボタンの高さ*/
 margin:30px auto;/*ボタンを中央に寄せる*/
 background-color: #AEC4E5;/*ボタンの色*/
 color: #fff;/*文字の色*/
 border-radius: 30px;/*ボタンの角丸*/
 font-weight: normal;
 font-size: 1em;/*文字サイズ*/
 text-align: center;/*文字を中央揃え*/
 text-decoration: none;
 overflow: hidden;/*はみ出た文字の処理*/
 white-space: nowrap;
 text-overflow: ellipsis;
}

/*光らせるアニメーション*/
.link-btn::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: kirari 3s ease-in-out infinite;
}

@keyframes kirari {
    0% {transform: scale(0) rotate(45deg); opacity: 0; }
    80% {transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% {transform: scale(4) rotate(45deg); opacity: 1; }
    100% {transform: scale(50) rotate(45deg); opacity: 0; }
}

アイコンを使う場合(Font Awesome5)

ボタンの右側に >> のアイコンをつける場合はこちらのコードを追加します。

/*アイコンの利用*/
.link-btn::after {
content: "\f101";
font-family: 'Font Awesome 5 Free';
font-size: 18px;
font-weight: bold;
margin-left: 0.5em;
}

アイコンには“Font Awesome 5”を使用(テーマ「Cocoon」には標準装備されています)

ホバーアクションをつけるとき

ボタンを押したときに変化をつけるホバーアクションを入れてもよいと思います。

クリックしてみてください
/*ホバーしたとき反転させる*/
.link-btn:hover{
background-color:#fff;
border:1px solid #AEC4E5;
color:#AEC4E5;
}

ブログを書く上でボタンを作ってみたい方、キラリと光らせてみたいと思っている方はやってみてください(゜∇^d)!!

参考にさせていただいたサイト

カスタマイズが効かないとき

たった一文字の表記ミスでデザインが崩れたり効かなかったりするので、下記の点を確認してみてください。

  • コードは半角英数字になっているか(全角は使えません)
  • 前後や余白に余計なスペース等が入っていないか
  • CSSクラスの前に"."が付いているか
  • CSSコードは{ }、メモ書きはきちんと/**/で囲んでいるか
  • 他に重複しているコードはないか

事前にバックアップをとり、カスタマイズは慎重に行いましょう。

ブログ関連カスタマイズ
\この記事をシェアする/
\はっちゃんをフォローする/
のんびり釣りっこ

Comment

Shopping


タイトルとURLをコピーしました