"CSS Tips Factory" : Presented by Nishishi via WordPress.

テキストリンクをボタンのように装飾する [リンク, ]

ボタンのように見えるリンクを用意したい場合、リンクを画像で用意すると、選択できない・検索できない・文字サイズを変更できない…などのデメリットがあります。
そこで、テキスト(文字)のままボタンのように見えるよう装飾してみてはいかがでしょうか。
例えば以下のように。

テスト1 テスト2 テスト3

▲これらのテキストリンクにマウスを載せるとへっこんだデザインに変わります。

上記のサンプルでは、3つのリンクがスタイルシートでボタンのように装飾されています。
リンクテキスト(=リンクに使われている文字)は、画像ではなくテキスト(文字)のままです。

これは単に、リンクに枠線や背景色を付加しているだけです。枠線の種類には、「でっぱった(凸型)ように見える枠線(=outset)」・「へっこんだ(凹型)ように見える枠線(=inset)」を指定しています。
具体的には、下記の通り。

border-style: outset; /* 凸型に見える */

上記のようにborder-styleプロパティに値「outset」を指定すると、全体がでっぱったように見える枠線色が描かれます。

border-style: inset; /* 凹型に見える */

上記のように、値を「inset」にすると、全体がへっこんだように見える枠線色が描かれます。
この値を使うことで、テキストをボタンのように装飾することができます。

全体のスタイルシートソースは下記の通り。

a {
   display: block; /* ★ブロック化 */
   margin: 0.1em; /* 外側の余白 */
   padding: 0.3em; /* 内側の余白 */
   width: 5em; /* 横幅 */
   float: left; /* 続く内容を右側に */
   text-decoration: none; /* 下線を消す */
   
   background-color: #ffffcc; /* ★背景色 */
   color: #000080; /* 文字色 */
   border-width: 2px; /* ★枠線の太さ */
   border-style: outset; /* ★凸型に見えるように */
   border-color: #ffff55; /* ★枠線のベース色 */
}
a:hover {
   background-color: #ffffaa; /* ★背景色 */
   color: red; /* 文字色 */
   border-style: inset; /* ★凹型に見えるように */
   text-decoration: underline; /* 下線を引く */
}

最低限必要な装飾は「★」マークを付加した部分だけです。あとは、書かなくても構いません。書けば、冒頭のサンプルのように表示されます。
とりあえず、コピー&ペーストで使ってみて、値をいろいろ変えてみつつ使ってみると良いでしょう。

なお、「凹型に見える枠線色」や「凸型に見える枠線色」は、実際にどのような色で表示されるかはブラウザによって異なります。凹凸を表現するためには、明るい線と暗い線を描画する必要があるので、border-colorプロパティで指定した色がベースに使われますが、具体的な配色はブラウザが勝手に決めますから。
複数のブラウザで表示確認しておいた方が良さそうです。

—(補足)—
……ここまで書いてから思ったんですけど、「ボタン」というのはクリックするまでへっこみませんよね…。上記のサンプルでは、hover疑似クラスを使って凹型に装飾させてますけど、active疑似クラスを使って凹型にした方がいいのかも知れません…。hover疑似クラスでは、背景色をちょっと変化させる程度にしておいて。
ただ、active疑似クラスを使ってリンクを装飾しても、クリックした直後にページを移動しちゃうので、あんまり見えないですよね…。(^_^;;; まあ、そこら辺は好みの問題かなあ?

このCSS TIPSへのコメントはお気軽に! [コメントはまだありません。]

著者紹介

主要なカテゴリ

このCSS TIPSへのコメント・トラックバック

コメントはまだありません。

コメント投稿欄 このCSS TIPSに対するコメント投稿を歓迎します。

(必須)

(必須) ※公開されません

※公開(リンク)されます

コメント:

※投稿内容によってはフィルタによって保留扱いとなる場合があります。その場合は承認後に掲載されます。
※本文中にURLっぽい文字列を記述すると、投稿内容はスパム扱いとなって無視されてしまう場合がありますので書かないようご注意下さい。

トラックバック

このCSS TIPSへのトラックバックURLは以下の通りです。

※言及リンクがないトラックバックは拒否されますのでご注意下さい。また、文字コードはUTF-8でお送りいただける方が望ましいです。