《 11:41 公開/更新》
テキストリンクをボタンに見えるように装飾したいことがよくあります。ボタンとして機能することが一目で分かるよう、表面がグラデーションのボタン形状にCSSで装飾する方法を解説。リンクを作るa要素に若干の工夫を加えて、background-imageプロパティにlinear-gradientを使えば、簡単にグラデーションボタンがCSSだけで作れます。
テキストリンクをボタンに見えるように装飾したいことがよくあります。ボタンとして機能することが一目で分かるよう、表面がグラデーションのボタン形状にCSSでリンクを装飾する方法を解説します。リンクを作るa要素に若干の工夫を加え、background-imageプロパティにlinear-gradientを使えば、簡単にグラデーションボタンがCSSだけで作れます。
やはり、わざわざボタンの形に見せるなら、現実の物理ボタンと同様に「押せそう」な感じに表示するのが分かりやすいでしょう。また、ボタンを画像で作ってしまうと(データサイズが大きくなって)読み込みに時間がかかったりページ内検索にヒットしないなどのデメリットがありますから、以下でご紹介するようにテキストリンクをCSSでボタン形状に見せる方法が望ましいでしょう。
まずは、シンプルに表面をグラデーションにしただけのボタン化サンプルです。青・黄・赤・緑の4系統色を用意してみました。ボタンに見えますが、実体はテキストリンクです。各ボタンリンクの上にマウスポインタを載せると、単色に変わります。
ボタン型に装飾されていてもテキストリンクですから、検索にもヒットしますし、範囲選択してコピーもできます。右クリックすれば(ブラウザ側の機能を使って)リンク先を別窓で開くなどの操作も可能です。あくまでもテキストリンクなので、ラベルを複数行に分けたり、太字にしたり、様々な装飾も併用できます。
先ほどのサンプルは、主に明るい背景色の中に掲載する場合の装飾でした。暗い背景色の中に掲載する場合は、明るい色の枠線を設けた上で、ボタン表面のグラデーションも少し明るめにした方が見やすいでしょう。下記は、そのように装飾してみた表示例です。黒背景の中に、白枠線でボタンが縁取りされているのが分かるでしょう。このサンプルでは、マウスポインタを載せた際にも別のグラデーションを表示する装飾にしてあります。
ボタンを作るグラデーションでは
上記のサンプルでは、標準状態では「ふくらんでいる」ようなグラデーションにし、マウスポインタを載せたときには「へこんでいる」ようなグラデーションにしています。
ただ、押すよりも前の段階でへこむのはちょっと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ソースのポイントは、ソース中にコメントの形で記載したとおりですが、ざっと以下に解説しておきます。
blockにしたら、横いっぱいに限界まで広がるボタンになります。なお、各サンプルの後半で示したような、ボタンのラベルを日本語＋英語の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でボタン形状に見せる方法が望ましいでしょう。
以上、テキストリンクを表面がグラデーションのボタン形状に装飾する方法でした。
ぜひ活用して、分かりやすいユーザインターフェイスを作ってみて下さい。
()
▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)
