にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

テキストリンクを表面がグラデーションのボタン形状に装飾する方法 [CSS3,ボックス,リンク,]

テキストリンクをボタンに見えるように装飾したいことがよくあります。ボタンとして機能することが一目で分かるよう、表面がグラデーションのボタン形状にCSSで装飾する方法を解説。リンクを作るa要素に若干の工夫を加えて、background-imageプロパティにlinear-gradientを使えば、簡単にグラデーションボタンがCSSだけで作れます。

テキストリンクをボタンに見えるように装飾したいことがよくあります。ボタンとして機能することが一目で分かるよう、表面がグラデーションのボタン形状にCSSでリンクを装飾する方法を解説します。リンクを作るa要素に若干の工夫を加え、background-imageプロパティにlinear-gradientを使えば、簡単にグラデーションボタンがCSSだけで作れます。

やはり、わざわざボタンの形に見せるなら、現実の物理ボタンと同様に「押せそう」な感じに表示するのが分かりやすいでしょう。また、ボタンを画像で作ってしまうと(データサイズが大きくなって)読み込みに時間がかかったりページ内検索にヒットしないなどのデメリットがありますから、以下でご紹介するようにテキストリンクをCSSでボタン形状に見せる方法が望ましいでしょう。

まずは、シンプルに表面をグラデーションにしただけのボタン化サンプルです。青・黄・赤・緑の4系統色を用意してみました。ボタンに見えますが、実体はテキストリンクです。各ボタンリンクの上にマウスポインタを載せると、単色に変わります。

テキストリンク テキストリンク テキストリンク テキストリンク

TEXTLINK TEXTLINK TEXTLINK TEXTLINK

ボタン型に装飾されていてもテキストリンクですから、検索にもヒットしますし、範囲選択してコピーもできます。右クリックすれば(ブラウザ側の機能を使って)リンク先を別窓で開くなどの操作も可能です。あくまでもテキストリンクなので、ラベルを複数行に分けたり、太字にしたり、様々な装飾も併用できます。

先ほどのサンプルは、主に明るい背景色の中に掲載する場合の装飾でした。暗い背景色の中に掲載する場合は、明るい色の枠線を設けた上で、ボタン表面のグラデーションも少し明るめにした方が見やすいでしょう。下記は、そのように装飾してみた表示例です。黒背景の中に、白枠線でボタンが縁取りされているのが分かるでしょう。このサンプルでは、マウスポインタを載せた際にも別のグラデーションを表示する装飾にしてあります。

テキストリンク テキストリンク テキストリンク テキストリンク

TEXTLINK TEXTLINK TEXTLINK TEXTLINK

ボタンを作るグラデーションでは

  • 下側を濃い色にして、上側を薄い色にすると、ボタン表面がふくらんでいるように見えます。
  • 下側を薄い色にして、上側を濃い色にすると、ボタン表面がへこんでいるように見えます。

上記のサンプルでは、標準状態では「ふくらんでいる」ようなグラデーションにし、マウスポインタを載せたときには「へこんでいる」ようなグラデーションにしています。
ただ、押すよりも前の段階でへこむのはちょっとUI(ユーザ・インターフェイス)としておかしい気もしますので、あまり明確にへこんでいるようには見えないような、かなり明るめの配色にしました。要は、「どのボタンが押されようとしているのか」が判別できれば良いわけですから。

※このページに掲載している動作サンプル(=ボタンのように装飾したテキストリンク)には、リンクを作るa要素に属性onclick="return false;"を付加してあるので、クリックしてもどこにも移動しません。

さて、サンプルを提示できたところで、上記のようなグラデーションボタンを作るHTML+CSSソースを以下にご紹介致します。

まずは、HTMLソースを記述しましょう。……と言っても、まったく何も特殊な点はありません。本当にただのテキストリンクです。

HTMLソース(1)

<a href="#" class="grabutton">テキストリンク</a>

とてもシンプルですよね。
特記する点としては、後からCSSでスタイルを加えるために class="grabutton" というclass名を付加している点くらいです。
このような普通のテキストリンクにCSSを加えるだけで、グラデーションボタン型に見た目を変えられます。

なお、先ほどの各サンプルの後半で示したように、ボタンのラベルを日本語+英語の2行にするには、以下のようなHTMLソースを書きます。

HTMLソース(2)

<a href="#" class="grabutton">
   <span class="jp">テキストリンク</span>
   <span class="en">TEXTLINK</span>
</a>

これも、大して複雑ではありません。
単に、リンクを作るa要素の中に、span要素を使って <span class="jp">日本語ラベル</span><span class="en">英語ラベル</span> を記述しているだけです。

次に、CSSでグラデーションボタンに見えるよう装飾を追加しましょう。

まずは、シンプルな「枠なし」のグラデーションボタンに装飾するためのCSSソースをご紹介致します。7行目がグラデーションの指定です。

CSSソース

/* ---------------------------- */
/* ▼枠なしグラデーションボタン */
/* ---------------------------- */
a.grabutton {
   display: inline-block;    /* インラインブロック化 */
   background-color: blue;   /* グラデーションが表示できない際の背景色 */
   background-image: linear-gradient( 0deg, #000080, #0080ff );
   color: white;             /* 文字色 */
   border-radius: 0.75em;    /* 角丸 */
   padding: 0.5em 1em;       /* 内側の余白量 */
   text-decoration: none;    /* 下線を消す */
   vertical-align: middle;   /* 縦方向の位置を中心で揃える */
}
/* ▼マウスが載ったときの装飾(※単色) */
a.grabutton:hover {
   background-image: none;     /* グラデーションを消す */
   background-color: #ccddff;  /* 背景色 */
   color: darkblue;            /* 文字色 */
}

上記は、ボタン表面を青色のグラデーションにする装飾です。例えば以下のように表示されます。元々がテキストリンクですから、当然ボタン表面に掲載する文字列はHTMLで自由に指定(変更)できます。

上記のCSSソースのうち、グラデーションを作っているのは7行目です。背景画像を指定するbackground-imageプロパティに値linear-gradientを指定することで、背景に指定のグラデーションを表示できます。グラデーションの条件は細かく指定できますが、ここでは簡単に以下のように記述しています。

background-image: linear-gradient( 傾き, 開始色, 終了色 );

先の7行目では、傾きがゼロ0deg、開始色が濃い青色#000080、終了色が薄い青色#0080ffのグラデーションを作っています。
それ以外のCSSソースのポイントは、ソース中にコメントの形で記載したとおりですが、ざっと以下に解説しておきます。

  • 5行目: インラインブロック化しています。a要素をボックス型にデザインしつつ、横方向にも並べられるようにするためです。もしこの値をblockにしたら、横いっぱいに限界まで広がるボタンになります。
  • 6行目: グラデーションを作るlinear-gradientを解釈できないブラウザの存在はもはや気にしなくても良いでしょうが、IE9以下などの古いブラウザは対応外です。そのようなブラウザのために、念のため「グラデーションが表示されなかった場合」のための背景色を指定しています。この記述があれば、グラデーションが見えなかったとしてもボタン型には見えるでしょう。
  • 9行目: 四隅を少しだけ丸くしておく方がボタンっぽく見えるので、半径0.75文字分だけ角丸にしています。好みで調整して下さい。
  • 10行目: 内側に余白がないと、窮屈なボタンになります。特に角丸の半径が大きい場合は、0.5文字~1文字程度の余白を左右に設ける方が望ましいでしょう。余白量を大きくするほど、大きなボタンになります。好みで調整して下さい。
  • 12行目: ボタン型のリンクを文章中に掲載する場合は、このようにvertical-alignプロパティに値middleを指定して、「ボタンの中心」が「行の中心」と揃うように配置する方が綺麗に見えるでしょう。
  • 16行目: マウスが載ったときにグラデーションを消すには、background-imageプロパティに値noneを指定する必要があります。単に背景色を指定しただけでは、グラデーションは表示されたままになります。(background-colorよりもbackground-imageの方が上に描画されるため)

なお、各サンプルの後半で示したような、ボタンのラベルを日本語+英語の2行にする際には、以下のようなCSSソースを追加します。(この点は、グラデーションボタンとは無関係ですので、使うも使わないも好きなようにして下さい。)

CSSソース(続き)

a span.jp {
   display: block;             /* ブロック化 */
   text-align: center;         /* センタリング */
   font-weight: bold;          /* 太字 */
   text-decoration: underline; /* 下線 */
}
a span.en {
   display: block;             /* ブロック化 */
   text-align: center;         /* センタリング */
   font-size: 75%;             /* 文字サイズ */
}

それぞれ、ブロック化することで(span要素1つが)1行で表示されるようにし、センタリングしています。日本語ラベル側は太字にして下線を引き、英語ラベル側は文字サイズを小さめにしています。

冒頭のサンプルに示したように、青色以外に、黄色・赤色・緑色のグラデーションにする場合のソースを以下に紹介しておきます。配色指定行だけを抜き出して掲載していますので、先ほどのソースに修正を加える形でご使用下さい。

▼黄色グラデーションボタンの場合

CSSソース(変更箇所6~7行目のみ)

   background-color: #aa0;   /* グラデーションが表示できない際の背景色 */
   background-image: linear-gradient( 0deg, #808000, #dddd80 );

CSSソース(変更箇所17~18行目のみ)

   background-color: #f0f0a0;  /* 背景色 */
   color: #770;                /* 文字色 */

CSSを修正すると、上記のようにボタン表面の配色が黄色ベースのグラデーションに変わります。

▼赤色グラデーションボタンの場合

CSSソース(変更箇所6~7行目のみ)

   background-color: #a00;   /* グラデーションが表示できない際の背景色 */
   background-image: linear-gradient( 0deg, #800000, #ff8080 );

CSSソース(変更箇所17~18行目のみ)

   background-color: #ffddcc;  /* 背景色 */
   color: #900;                /* 文字色 */

CSSを修正すると、上記のようにボタン表面の配色が赤色ベースのグラデーションに変わります。

▼緑色グラデーションボタンの場合

CSSソース(変更箇所6~7行目のみ)

   background-color: #0a0;   /* グラデーションが表示できない際の背景色 */
   background-image: linear-gradient( 0deg, #008000, #80cc80 );

CSSソース(変更箇所17~18行目のみ)

   background-color: #a0f0a0;  /* 背景色 */
   color: #050;                /* 文字色 */

CSSを修正すると、上記のようにボタン表面の配色が緑色ベースのグラデーションに変わります。

枠なしグラデーションボタンのCSSソースは以上です。
次に、主に暗い背景に掲載する際に使える、枠を付けたグラデーションボタンを作ってみましょう。

次に、「枠あり」のグラデーションボタンに装飾するためのCSSソースと、マウスポインタが載った際にも逆向きのグラデーションにするCSSソースをご紹介致します。10行目と18行目がグラデーションの指定です。

CSSソース

/* ---------------------------- */
/* ▼枠ありグラデーションボタン */
/* ---------------------------- */
a.grabutton {
   display: inline-block;     /* インラインブロック化 */
   border: 2px solid white;   /* 枠線 */
   border-radius: 0.67em;     /* 角丸 */
   padding: 0.5em 1em;        /* 内側の余白量 */
   background-color: #58e;    /* グラデーションが表示できない際の背景色 */
   background-image: linear-gradient( 0deg, #0000ff, #87ceeb );
   color: white;              /* 文字色 */
   text-decoration: none;     /* 下線を消す */
   vertical-align: middle;    /* 縦方向の位置を中心で揃える */
}
/* ▼マウスが載ったときの装飾(※グラデーション) */
a.grabutton:hover {
   background-color: #cceeff; /* グラデーションが表示できない際の背景色 */
   background-image: linear-gradient( 0deg, white, #bbddff );
   color: #00a;               /* 文字色 */
}

上記は、ボタン表面を青色のグラデーションにする装飾です。例えば以下のように表示されます。

グラデーションの作り方は、先ほどの「枠なしボタン」と同じです。枠線を加えるborderプロパティを加えている点だけが異なります。

冒頭のサンプルに示したように、青色以外に、黄色・赤色・緑色のグラデーションにする場合のソースを以下に紹介しておきます。配色指定行だけを抜き出して掲載していますので、先ほどのソースに修正を加える形でご使用下さい。

▼黄色グラデーションボタンの場合

CSSソース(変更箇所9~10行目のみ)

   background-color: #bb5;    /* グラデーションが表示できない際の背景色 */
   background-image: linear-gradient( 0deg, #909000, #dddd80 );

CSSソース(変更箇所17~19行目のみ)

   background-color: #ffffcc; /* グラデーションが表示できない際の背景色 */
   background-image: linear-gradient( 0deg, white, #ffffaa );
   color: #770;

CSSを修正すると、上記のようにボタン表面の配色が黄色ベースのグラデーションに変わります。

▼赤色グラデーションボタンの場合

CSSソース(変更箇所9~10行目のみ)

   background-color: #a00;    /* グラデーションが表示できない際の背景色 */
   background-image: linear-gradient( 0deg, #cc0000, #ebce87 );

CSSソース(変更箇所17~19行目のみ)

   background-color: #ffe0e0; /* グラデーションが表示できない際の背景色 */
   background-image: linear-gradient( 0deg, white, #ffddbb );
   color: #a00;

CSSを修正すると、上記のようにボタン表面の配色が赤色ベースのグラデーションに変わります。

▼緑色グラデーションボタンの場合

CSSソース(変更箇所9~10行目のみ)

   background-color: #0a0;    /* グラデーションが表示できない際の背景色 */
   background-image: linear-gradient( 0deg, #009000, #80dd80 );

CSSソース(変更箇所17~19行目のみ)

   background-color: #ddffdd; /* グラデーションが表示できない際の背景色 */
   background-image: linear-gradient( 0deg, white, #aaffaa );
   color: #080;

CSSを修正すると、上記のようにボタン表面の配色が緑色ベースのグラデーションに変わります。

枠ありグラデーションボタンのCSSソースは以上です。

昨今はフラットデザインが流行っていて、ぱっと見た感じでは「押せる」のか「押せない」のか判別できないようなリンク(ボタン)のデザインも多々見かけるようになりました。紛らわしい配色を避けて、余白をうまく使えば、フラットデザインでもユーザに誤認識させずに済むのでしょうが、なかなか難しいですよね。

やはり、ボタンのように見せるからには、「押せそう」な感じに見えるように、現実世界の物理ボタンと同様の『下側が暗く上側が明るい』グラデーションで表面を装飾するのが望ましいのではないかと思います。

また、ボタンを画像で作ってしまうと(テキストに比べて)データサイズが大きくなって読み込みに時間がかかりますし、ページ内検索などにもヒットできなくなるデメリットがありますから、今回ご紹介したようにテキストリンクをCSSでボタン形状に見せる方法が望ましいでしょう。

以上、テキストリンクを表面がグラデーションのボタン形状に装飾する方法でした。
ぜひ活用して、分かりやすいユーザインターフェイスを作ってみて下さい。

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---