キラリと光るボタンを設置！CSSカスタマイズ

リンクボタンの設置

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

光るリンクボタンのサンプル

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

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

【クリック率が上がる！】AFFINGER風の光るボタンをCSSだけで作る方法

今回はWordPressテーマ「AFFINGER5」風のキラッと光るボタンをCSSだけで作る方法を紹介します。他にもいくつかパターンを用意したので、気に入ったのがあったら持って帰ってください。コピペ自由です。光るボタンのCSSコード先にコー

dezanari.com

HTML

リンクを貼るにはaタグを使います。

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

• <a href=”リンク先のURL”>←ダブルクォーテーションで囲んだ部分にリンク先のURLを書きます。
• class=”shiny-btn1″←クラスを指定しておく
• aタグで挟まれた部分にボタンに表示したい文字を書きます。

CSS

ここで下記の設定をしていきます。

• リンクボタンのデザイン
• ボタンを光らせる
• ホバー時のアクション（※不要な場合削除）
• ボタンにアイコンを使用する（※不要な場合削除）

/***リンクボタンの設定***/
.shiny-btn1 {
display: block;
position: relative;
width: 95%;/*ボタンの幅*/
padding: 8px 10px;
margin:0 auto 30px;
background-color: #ff9999;/*ボタンの色*/
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:#ff9999;/*文字の色*/
background:transparent;/*ボタンの色を透明に*/
border:1px solid #ff9999;/*枠線*/
}

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

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