先日、カテゴリーやタグ用の大型ボタンをつくりました。
今回はもっと一般的に使えるリンク用のボタンを作りました。
目次(クリックでジャンプ)
基本デザイン
❶文字を囲むボックス(CSSクラス)を作り、文字にリンクを張る
❷リンク用のCSSクラスを作り、文字色を好みに設定する
❸リンク用のCSSクラスに縦横100%大の透明なafter要素を加える。
ここまでで、全体がクリックできるボタンが完成。
コメント追加
リンク先の中身を簡単に説明するコメントを付属します。
❹リンクを貼った文字の下にコメントを書く
❺コメントを囲む透明のボックス(CSSクラス)を作り、文字サイズを小さめに設定。
ここまでで、コメント付きのボタンが完成
アクション追加(1)
マウスオーバー時のアクションを加えます
❻➀で作ったボックスにhover要素を加えて、好みのデザインにする(ここでは緑に発光したようなデザイン)
アクション追加(2)
マウスオーバー時のアクションをアニメーションさせようとしても、背景グラデーションだけは無理なようです。
webで検索して拝見した手法を参考にします。
❼➀ボタンや⑥ボタンのafter要素につけていたグラデーションを単色にする。
❽③リンクのafter要素を半透明のグラデーションにする。
これで通常時もマウスオ－バ－時にもグラデーションがかかり、下に透けて見える色が変わるという仕組み。
よく考えると…
モバイル時にあまり意味が無いことに気づいた…次回はキラリと光るボタンにしよう