どうも！LSSです！！
先日、
にて、フォームパーツであるボタンをリンク代わりに使用するサンプルを公開しました。
「ページ移動の処理をJavaScriptで行う」というものでしたが、本来ならページの移動は「aタグによるリンク」で行うものなので、aタグをCSS装飾でボタン風に見せかけるほうがスマートですね。（デザインの自由も効く、という利点もあります^^）
という事で、今回は「マウスカーソルがボタンに乗った時」「ボタンをクリックした時」に見た目が変化するボタン風のリンクの作り方をご紹介します。
リンクボタン CSS版
クリックするのはこちらです！
コード
<style>
.linkbtn{
border:1px solid black;
border-radius:3px;
margin:5px;
padding:5px;
background:linear-gradient(#eeeeee 48%,#bbbbbb 52%,#eeeeee 100%);
text-decoration:none!important;
color:#222222!important;
box-shadow:2px 2px 5px #888888;
}
.linkbtn:hover{
background:linear-gradient(#cccccc 48%,#999999 52%,#cccccc 100%);
box-shadow:2px 2px 5px #444444;
}
.linkbtn:active{
background:linear-gradient(#ffffff 48%,#dddddd 52%,#ffffff 100%);
box-shadow:4px 4px 3px #cccc44;
}
</style>
<p>クリックするのは<a href="https://little-strange.hatenablog.com/" class="linkbtn" target="_blank">こちら</a>です！</p>
コード概要
まず、リンクであるaタグに、
<a href="飛び先のURL" class="linkbtn" target="_blank">こちら</a>
のように、「class="linkbtn"」とクラス名をつけます。（linkbtnは任意の名前、好きに書き換えてOK）
※ちなみに「target="_blank"」は、つけるとそのリンクが別タブで開くようになります。別タブでなく同タブでページ移動する場合は削ってください。
そしてそのクラス「linkbtn」に対して、CSSから装飾を施していきます。
今回のCSSの構造は、
.linkbtn{
リンクボタンのデザイン（平常時）
}
.linkbtn:hover{
マウスカーソルが乗った時のデザイン変更点
}
.linkbtn:active{
クリックされた時のデザイン変更点
}
となります。
平常時のデザインが単純にクラスに対する指定となるセレクタは
.linkbtn{
マウスカーソルが乗った時の変更を指定するセレクタは
.linkbtn:hover{
クリックされた時の変更を指定するセレクタは
.linkbtn:active{
…という風に、クラス名指定のあとに「:hover」や「:active」をつけると、その状態の時だけの追加（または上書き変更）指定となります。
なお、この「:hover」や「:active」を「疑似セレクタ」といいます。
※狭い意味では「疑似クラス」とも。
なので、作り方としては
- クラス名を考えて、aタグにclassを追記指定する
- CSSでそのクラスに対して、ボタンっぽい見た目のスタイルを指定する（変化不要なら、この時点で完成ですね）
- 疑似セレクタ「:hover」に対して、マウスカーソルが乗った時の変化するスタイルを指定する
- 疑似セレクタ「:active」に対して、クリックされた時の変化するスタイルを指定する
という手順を踏む事で、オリジナルの「リンクボタン（っぽいリンク）」を作る事ができます^^
また、それらを記述した<style>タグと同ページ内であれば、いくつでも「class指定つきaタグ」を配置する事ができます。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
