クリックしたくなるボタンデザイン！CSSでハイパーリンク風ボタンを作る
CSS でボタンをハイパーリンクのように見せる方法
ここでは、CSS を使ってボタンをハイパーリンクのように見せる2つの方法をご紹介します。
方法 1: a 要素と button 要素を組み合わせる
この方法は、HTML で <a> 要素と <button> 要素を組み合わせることで実現します。
<a href="#">
<button>ボタン</button>
</a>
上記のコードでは、<button> 要素の中にテキスト "ボタン" が表示されます。<a> 要素で <button> 要素を囲むことで、ボタンをクリックすると指定されたURLに遷移するように設定できます。
この方法の利点は、ボタンの機能とハイパーリンクの機能を両方とも持たせることができることです。しかし、アクセシビリティの観点からは <button> 要素のみを使用する方が望ましい場合があります。
この方法は、CSS のみでボタンを装飾することで、ハイパーリンクのように見せるものです。
button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
text-decoration: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
上記の CSS コードは、ボタンの背景色を青色、文字色を白、ボーダーをなし、パディングを設定し、テキスト装飾をなし、カーソルをポインターに変更します。また、ボタンにホバーした際の背景色をさらに濃い青色に変更します。
この方法の利点は、HTML コードを簡潔に保つことができることです。しかし、ボタンの機能を実装するには、JavaScript を使用する必要があります。
- アクセシビリティが重要であれば、方法 1 を選択する必要があります。
- HTML コードを簡潔に保ちたい場合は、方法 2 を選択する必要があります。
上記以外にも、ボタンをハイパーリンクのように見せる方法はいくつかあります。例えば、Font Awesomeなどのアイコンフォントを利用したり、SVG画像を使用したりする方法もあります。
HTML コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ボタンをハイパーリンクのように見せる</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#">
<button>ボタン</button>
</a>
</body>
</html>
CSS コード
button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
text-decoration: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
このコードを実行すると、以下のようなボタンが表示されます。
[画像]
このボタンは、クリックすると指定されたURLに遷移するように設定されています。また、見た目はハイパーリンクのように青色で下線付きになっています。
カスタマイズ
このコードはあくまでも例ですので、ご自身のニーズに合わせてカスタマイズすることができます。例えば、ボタンの色、サイズ、フォントなどを変更したり、独自のスタイルを追加したりすることができます。
CSS でボタンをハイパーリンクのように見せるその他の方法
outline プロパティを使用すると、ボタンにフォーカスが当たったときに表示される輪郭を、ハイパーリンクと同じ青色にすることができます。
button:focus {
outline: 2px solid #007bff;
}
このコードは、ボタンにフォーカスが当たったときに、2ピクセルの青色の輪郭を表示します。
text-shadow プロパティを使用すると、ボタンの文字に影を付けることができます。影の色を青色にすることで、ハイパーリンクのように見せることができます。
button {
text-shadow: 2px 2px 5px #007bff;
}
このコードは、ボタンの文字に、2ピクセル右下方向に5ピクセル幅の青色の影を付けます。
button {
box-shadow: 0 2px 5px #007bff;
}
アイコンフォントを使用する
Font Awesomeなどのアイコンフォントを使用すると、矢印などのアイコンをボタンに表示することができます。アイコンを青色にすることで、ハイパーリンクのように見せることができます。
<button>
<i class="fas fa-arrow-right"></i>
</button>
button i {
color: #007bff;
}
このコードは、ボタンに右矢印アイコンを表示します。アイコンは青色で表示されます。
<button>
<svg width="20" height="20">
<path d="M0 10 L10 0 L20 10" stroke="#007bff" stroke-width="2" />
</svg>
</button>
- シンプルな方法であれば、
outlineプロパティを使用するのが良いでしょう。 - ボタンに影を付けたい場合は、
text-shadowプロパティまたはbox-shadowプロパティを使用します。 - アイコンを表示したい場合は、アイコンフォントまたは SVG 画像を使用します。
上記以外にも、CSS でボタンをハイパーリンクのように見せる方法はいくつかあります。例えば、ボタンの形状を変更したり、アニメーションを追加したりする方法もあります。
css button hyperlink
