リンクボタンをHTMLとCSSで作成（aタグ使用）、キラリと光らせる方法

アイキャッチ／リンクボタンカスタマイズ
2021年01月25日

トップページをサイト型に変更したので、今回は記事の下にもっと見るといったリンクボタンを置いて、さらに光らせてみたいなと思います！

リンクボタン

この記事で分かること
  1. リンクできるボタンを設置する方法
  2. HTML/CSSのコード
  3. キラッと光らせる方法
  4. ボタンを反転させる方法
  5. アイコンをつける方法
ここを解説
吹き出し
この記事を書いた人
  • ブログが好きな40代主婦
  • CocoonサイトをCSSでフルカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー30
  • ワードプレスで３サイトを運営しています
はっちゃん
です
プロフィール

Gutenberg（グーテンベルグ）なら簡単に作れます

このカスタマイズはワードプレスのブロックエディタGutenberg（グーテンベルグ）、さらにテーマCocoonならオリジナル機能で簡単に実装できます。

光らせることも簡単！
ボタン
リンクボタン

このボタンをHTMLとCSSを使って自作する方法なのでコードエディタなどブロックエディタを使わずにHTMLで編集したいときに便利です。

リンクボタンのサンプル

サンプルとして自作したボタンを下に置いてみました。

一定間隔でキラッと光るのがお分かりいただけますか？(・∇・)

＼サンプル／

リンクボタン

このボタンを作っていくよ

リンクボタン作成にはaタグを使用する

さきほど書いた通りWordPressの有料テーマや無料テーマの「Cocoon」には標準でボタンが作成できる機能がついていますが、今回はテーマ独自機能に頼らずに自由なカスタマイズができるように、

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

をご紹介します。

リンクボタンを作成するコード

HTML

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

<a href="リンク先のURL" class="link-btn-1">リンクボタン</a>

HTMLの書き方／ポイント

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

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

CSS

CSSでは<a>タグ（テキストリンク）をボタンのように見せるために、細かく下記のスタイル設定をしていきます。

/***リンクボタンの設定***/
.link-btn-1 {
  display:block;/*ブロック要素へ変換*/
  margin:auto;/*ボタン中央寄せ*/
  width: 250px;/*ボタンの幅*/
  border:1px solid #666;/*枠線の太さ・種類・色*/
  background-color:#666;/*ボタンの色*/
  padding: .5rem;/*ボタンの高さ*/
  color:#fff;/*文字の色*/
  border-radius:30px;/*角の丸み*/
  text-decoration: none;/*リンクの下線を消す*/
  text-align: center;/*文字中央寄せ*/
  overflow: hidden;/*はみ出た部分を表示しない*/
  position: relative;/*位置（起点）*/
}


/*光らせる*/
.link-btn-1::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; }
}

/*ホバーしたとき反転させる*/
.link-btn-1:hover{
background-color:transparent;
color:#666;
}

ブロック要素へ変換

<a>タグはデフォルトではインライン要素なので、これをブロック要素に変換します。

ボタンのデザイン

幅、高さ、色、丸み、はみ出た文字をどうするかなどの各種設定をします。

ボタンを光らせる

光らせるためにボタンの疑似要素「::before」に白いグラデーションの背景を設定し、アニメーションで「position」を移動させてキラッとした光を出しています。

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

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

＼クリックすると反転します／

ホバーしたときに反転

アイコンを使う場合（Font Awesome5）

アイコン（ボタンの右側に >>）を付ける場合はこちらのCSSを追加します。

.link-btn-1:after{
	font-family: "Font Awesome 5 Free";
	font-weight:bold;
	content: "\f101";
	margin-left:5px;
}

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

ひとこと

このようにHTMLとCSSで作成できるので、ブログを書く上でボタンを作ってみたい方、キラリと光らせてみたいと思っている方はお試しください(゜∇^d)!!

Comment