【カスタマイズ】【コピペで簡単】前作ったトップリンクボタンをモダン風にアレンジ♪
どうも。へんじにゃ@hengin_blogというものです。
今回は以前のブログカスタマイズ記事のトップリンクボタンをシンプルかつ、テーマに合うようなモダン風にアレンジしたのでそれを紹介していきたいと思います(^^♪
ちなみに前回のトップリングボタンはCSSのみでスムーズなアニメーションを実現したものなのでそちらについて詳しく知りたい方は下記の記事をご参照ください～
それでは早速行きましょう～
モダンなスムーズトップリンクボタン
早速ですが次のデモをご覧ください！！
このように最初は背景色がないのにホバーすると枠の色に背景色が変化したのが分かるでしょう。。
色の変更については次の章で詳しく解説しています～♪
基本的なコードは前のトップリンクボタンのと一緒ですが色やアニメーションを少しいじった形です。
単純にコピペだけしたいねんっ！！
そんな人はそのままコピーして頂いていいですが、「コピペの方法が良く分からない！！」という方もいるかと思うので、丁寧なコピペの方法を前回ので解説しているので、分からない方はご参照ください～
2度もすいません(;^_^A
詳しひ色の変更方法
色の変更はコードのコメント部分を見て頂ければ分かると思いますが、一応解説しておきます。
\\ちなみにすべてCSSの変更のみです//
- 通常時の枠の色：「.TopPageLink」の所で、「border」の「#00D9A0」を好みの色に変更する
- ホバー時の背景色：「.TopPageLink a:hover」の所で、「background」の「#00D9A0」を好みの色に変更する
- ホバー時の矢印色：「.TopPageLink span」の所で、「border-left」と「border-top」の「#00D9A0」を好みの色に変更する
- これらの色を揃えると、ホバー時に矢印が白色で背景が枠になじむ感じになる！
無事にコピペ出来たでしょうか？？
今回は前回のアレンジだったので新しいものではないですが、ある程度CSSの知識があればチャチャっとアレンジしていくのは楽しいですよね(^▽^)/
これからもアレンジのみならずいろいろ作ってみようと思うので、また覗きに来てください～！！今回は以上です！！
参考になったら読者登録よろしくお願いいたします！！
読者登録返しします！！
