CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでテキストボタンのスタイルを設定する方法をわかりやすく解説

テキストボタンとは、背景色を持たずに文字色だけで視覚的な印象を与えるボタンのスタイルです。Google マテリアルデザインなどでも採用されている洗練されたデザインで、CSSを使えば簡単に実装できます。

テキストボタンのスタイリングのポイント

テキストボタンを作る基本は、border: none; でボタンの枠線とデフォルトの背景を消し、color プロパティで文字色を指定することです。さらに :hover 疑似クラスを組み合わせると、マウスオーバー時に薄いグレーの背景を表示でき、クリックできる要素であることが直感的に伝わります。

以下のコードでは、Success・Info・Warning・Danger・Default の5種類のテキストボタンを、それぞれ異なる文字色で定義しています。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
button {
    border: none;
    color: white;
    font-weight: bolder;
    padding: 20px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 6px;
}
.Success {
    color: #4caf50;
}
.Success:hover {
    background: #e7e7e7;
}
.Info {
    color: #2196f3;
}
.Info:hover {
    background: #e7e7e7;
}
.Warning {
    color: #ff9800;
}
.Warning:hover {
    background: #e7e7e7;
}
.Danger {
    color: #f44336;
}
.Danger:hover {
    background: #e7e7e7;
}
.Default {
    color: black;
}
.Default:hover {
    background: #e7e7e7;
}
</style>
</head>
<body>
<h1>Text Buttons Example</h1>
<button class="Success">Success</button>
<button class="Info">Info</button>
<button class="Warning">Warning</button>
<button class="Danger">Danger</button>
<button class="Default">Default</button>
</body>
</html>

出力結果

上記のコードをブラウザで実行すると、次のように5種類のカラーテキストボタンが横並びで表示されます。各ボタンにマウスを乗せると、背景が薄いグレーに変化してホバー効果を確認できます。

CSSでテキストボタンのスタイルを設定する方法をわかりやすく解説

補足：カスタマイズのヒント

文字色は用途に合わせて自由に変更できます。たとえば成功系の操作には緑（#4caf50）、情報系には青（#2196f3）、警告系にはオレンジ（#ff9800）、危険系の操作には赤（#f44336）を使うのが一般的です。また、transition プロパティを追加すると、ホバー時の背景色変化を滑らかにアニメーションさせることができます。

  1. CSSで光るテキスト（グロー効果）を作成する方法

    CSSで光るテキスト（グロー効果）を作成するには、text-shadowプロパティと@keyframesによるアニメーションを組み合わせます。複数の影を重ねて光の輪を表現し、それをアニメーションで明滅させることで、文字が脈動するように輝く演出が可能です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {

  2. CSSでヘッダーにスタイルを設定する方法をサンプルコード付きで解説

    CSSを使ってページのヘッダーにスタイルを設定する方法を、実際のコード例とともに紹介します。ヘッダーはウェブサイトの「顔」となる重要な要素です。背景色・文字色・余白・文字サイズなどを工夫することで、サイト全体の印象を大きく変えることができます。 サンプルコード <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta charset="UTF-8" /> <meta name="viewport" content