ご訪問ありがとうございます.・。*+
茨城・千葉・宮城エリアの釣り(ファミリーフィッシング)をメインとした趣味ブログです。
ブログをカスタマイズすることが好きで無料ブログからWordPressに引っ越しました。
書きたいことや旧ブログの記事移行がなかなか追い付いつかず、ゆっくりペースで更新中ですがお立ち寄りください(*^^*)

全記事一覧はこちら >>

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

リンクボタン カスタマイズ

リンクボタンの設置

今回やりたいこと
  1. リンクボタンを設置する
  2. そのボタンをキラッと光らせる

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

このボタンを光らせたい

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

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

光るリンクボタン(サンプル)

ワードプレスに限らず、他のブログサービスでも設定することができます。

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

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)!!

コメント