リンクボタンの設置
今回やりたいこと
- リンクボタンを設置する
- そのボタンをキラッと光らせる
トップページにカテゴリごとの新着記事を表示したので、その下に『このカテゴリーの記事を見る』といったカテゴリページへのリンクボタンを置いて、さらに光らせてみたいなと思います！
DEMO
下にボタンを置いてみました。キラッと光るのがお分かりいただけますか？(・∇・)
ホバー時には背景色と文字色が反転するようにしています。
リンクボタン作成と光らせるコード
HTML
リンクを貼るにはaタグを使います。
<a href="リンク先のURL" class="shiny-btn1">ここにテキスト</a>POINT
- <a href=”リンク先のURL”>←ダブルクォーテーションで囲んだ部分にリンク先のURLを書きます。
- class=”shiny-btn1“←クラスを指定しておく（クラス名は自分で分かりやすいように変更してもOKです）
- <a></a>タグで挟まれた部分にボタンに表示したい文字を書きます。
CSS
ここで下記の設定をしていきます。
- リンクボタンのデザイン
- ボタンを光らせるアニメーション
- ホバー時のアクション（※不要な場合削除）
- ボタンの中にアイコンをつける（※つける場合は後述のコードを追加）
/***リンクボタンの設定***/
.shiny-btn1 {
display: block;
position: relative;
width: 95%;/*ボタンの幅*/
padding: 8px 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;
}
/*光らせる*/
.shiny-btn1::before {
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
animation: shiny-btn1 3s ease-in-out infinite;
}
@-webkit-keyframes shiny-btn1 {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
/*ホバー*/
.shiny-btn1:hover {
text-decoration: none;
color:#AEC4E5;/*文字の色*/
background:transparent;/*ボタンの色を透明に*/
border:1px solid #AEC4E5;/*枠線*/
}
アイコンを使う場合（Font Awesome5）
ボタンの右側に >> のアイコンをつける場合はこちらのコードを追加します。
ここにアイコンを表示します→
/*アイコンの利用*/
.shiny-btn1::after {
content: "\f101";
font-family: 'Font Awesome 5 Free';
font-size: 18px;
font-weight: bold;
margin-left: 0.5em;
}アイコンには“Font Awesome 5”を使用しています。
ブログを書く上でボタンを作ってみたい方、キラリと光らせてみたいと思っている方はやってみてください(゜∇^d)!!
