ゆるい海釣りの記録と、ブログのカスタマイズを綴る趣味ブログです。新着記事はこちら >>

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

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

リンクボタンの設置

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

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

DEMO

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

ホバー時には背景色と文字色が反転するようにしています。

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

HTML

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

<a href="リンク先のURL" class="shiny-btn1">ここにテキスト</a>
POINT
  1. <a href=”リンク先のURL”>←ダブルクォーテーションで囲んだ部分にリンク先のURLを書きます。
  2. class=”shiny-btn1“←クラスを指定しておく(クラス名は自分で分かりやすいように変更してもOKです)
  3. <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)!!

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


カスタマイズが効かないとき

たった一文字の表記ミスでデザインが崩れたり効かなかったりするので、まずは下記の点を確認してみてください。

  • コードは半角英数字になっているか
  • 余計なスペース等が入っていないか
  • CSSクラスの前に"."が付いているか
  • CSSのメモ書きはきちんと/* */で囲んでいるか

事前にバックアップをとり、カスタマイズは慎重に行いましょう。

カスタマイズの多くは他のサイトを参考にしながらも、自分で調べて試行錯誤しながら手間隙をかけてコードを書いています。


このデザインにするにはどう書けばよい?CSSが効かなかったり、コードの不備でデザインが崩れてしまったり修復したり、あーでもない、こーでもない!

コピペされた際にはコメント欄に一言(カスタマイズできた、不具合ありなど何でも)、足跡を残していただくと大変励みになります^^

ブログ関連カスタマイズ
\この記事をシェアする/
\はっちゃんをフォローする/
のんびり釣りっこ

コメント

タイトルとURLをコピーしました