今回やりたいこと
- リンクできるボタンを設置する
- そのボタンをキラッと光らせる
トップページにカテゴリーごとの新着記事を表示したので、その下にカテゴリーページへのリンクボタンを置いて、さらに光らせてみたいなと思います！
リンクボタンの設置
DEMO
サンプルとして下にボタンを置いてみました。一定間隔でキラッと光るのがお分かりいただけますか？(・∇・)
See the Pen リンクボタンを光らせる by はっちゃん (@hacchan) on CodePen.
リンクボタン作成と光らせるコード
WordPressの有料テーマや無料テーマの「Cocoon」には標準でボタンが作成できる機能がついていますが、今回はどんなテーマでも使えて好きなデザインにカスタマイズできるように、
HTMLのaタグにCSSで装飾し、ボタンの様に見せる方法
をご紹介します。
HTML
HTMLでリンクを貼るには a タグを使い、このように記述します。
<a href="リンク先のURL" class="link-btn">ここにテキスト</a>HTMLの書き方／ポイント
- <a href=”リンク先のURL“>←ダブルクォーテーションで囲んだ部分にリンク先のURLを書きます。
- <a>タグの中にCSSを適用するためのクラス（class=”link-btn”）を指定しておく（クラス名は自分で分かりやすいように変更してもOKです）
- <a></a>タグで挟まれた部分にボタンに表示する文字を書きます。
これでリンクの設定は終わり！この時点ではただのテキストリンクになっているので、あとはCSSでボタンのように装飾していきます。
CSS
ここではa タグをボタンのように見せるために、細かく下記の設定をしていきます。
- ブロック要素へ変換
- <a>タグはデフォルトではインライン要素なので、これをブロック要素に変換します。
- ボタンのデザイン
- 幅、高さ、色、形、はみ出た文字をどうするかなどの各種設定をします。
- ボタンを光らせる
- 光らせるためにボタンの疑似要素「::before」に白いグラデーションの背景を設定し、アニメーションで「position」を移動させてキラッとした光を出しています。
- ボタンの中にアイコンをつける
- ホバーアクションをつける
（※アイコンとホバーアクションをつけるときは後述のコードを追加します）
コードはこちらです
/***リンクボタンの設定***/
.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;
}ホバーアクションをつけるとき
ボタンを押したときに変化をつけるホバーアクションを入れてもよいと思います。
クリックしてみてください
ホバーしたときに反転
/*ホバーしたとき反転させる*/
.link-btn:hover{
background-color:#fff;
border:1px solid #AEC4E5;
color:#AEC4E5;
}ブログを書く上でボタンを作ってみたい方、キラリと光らせてみたいと思っている方はやってみてください(゜∇^d)!!
Comment