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

リンクボタンの設置

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

DEMO

下にボタンを置いてみました。キラッと光るのがお分かりいただけますか？(・∇・)

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

HTML

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

<a href="リンク先のURL" class="shiny-btn1">ここにテキスト</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;
}

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

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

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

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

dezanari.com