CSSボタン
このセクションでは、我々はボタンを作成するために、CSSの使用を紹介します。
基本的なボタンのスタイル
CSSの例
背景色:#4CAF50; / *グリーン* /
国境:なし;
色:白;
パディング:15ピクセル32PX;
テキスト整列:センター;
テキスト装飾:なし;
表示:インラインブロック;
フォントサイズ:16pxに;
}
»をお試しください
ボタンの色
ブルーレッドグレーブラック 我々は、使用することができbackground-color
ボタンの色を設定するには、プロパティを:
CSSの例
.button2 {背景色:#の008CBA;} / *ブルー* /
.button3 {背景色:#1 f44336;} / *赤* /
.button4 {背景色:#e7e7e7;色:黒;} / *グレー* /
.button5 {背景色:#555555;} / *黒* /
»をお試しください
ボタンサイズ
12ピクセルに16px 20ピクセルは24px 我々は、使用することができfont-size
ボタンのサイズを設定するには、プロパティを:
CSSの例
.button2 {フォントサイズ:12ピクセル;}
.button3 {フォントサイズ:16pxに;}
.button4 {フォントサイズ:20ピクセル;}
.button5 {フォントサイズ:は24px;}
»をお試しください
丸みを帯びたボタン
4PX 12ピクセル50%8px 我々は、使用することができますborder-radius
フィレットボタンを設定するには、プロパティを:
CSSの例
.button2 {国境半径:4PX;}
.button3 {国境半径:8px;}
.button4 {国境半径:12ピクセル;}
.button5 {国境半径:50%;}
»をお試しください
ボタンの境界線の色
我々は、使用することができborder
ボタンの境界線の色のプロパティを:
ホバーボタン
我々は、使用することができます:hover
ボタンの上に置くとスタイルを変更するセレクタを。
ヒント:我々は、使用することができtransition-duration
効果の速度を「ホバリング」するために設定するプロパティを:
CSSの例
-webkit-遷移期間:0.4秒; / *サファリ* /
遷移期間:0.4秒。
}
.button:ホバー{
背景色:#4CAF50; / *グリーン* /
色:白;
}
ja.
»をお試しください
ボタンの影
我々は、使用することができbox-shadow
ボタンに影を追加するには、プロパティを:
CSSの例
ボックスシャドウ:0 8px 16pxに0 RGBA(0,0,0,0.2)、0 6px 20ピクセル0 RGBA(0,0,0,0.19)。
}
.button2:ホバー{
ボックスシャドウ:0 12ピクセルに16px 0 RGBA(0,0,0,0.24)、0 17pxは50px 0 RGBA(0,0,0,0.19)。
}
»をお試しください
ボタンを無効にします
我々は、使用することができますopacity
透明性を追加し、プロパティをボタンの(「無効」の効果を属性に似ています)。
ヒント:どのように私は追加することができcursor
プロパティを、無効画像を設定する「-許されない」に設定します。
ボタンの幅
デフォルトでは、ボタン上のボタンのテキストのサイズは、(テキスト一致長に基づいて)決定しました。 我々は、使用することができますwidth
ボタンの幅を設定するプロパティを:
ヒント:あなたが割合として設定することができる応答ボタンを設定する場合、単位としてピクセル(px)を使用することができ、固定幅を設定したい場合。
ボタングループ
ボタンボタンボタン
外部から削除し、追加float:left
ボタンのセット:
ボーダーボタングループと
ボタンボタンボタン
我々は、使用することができますborder
ボーダーとボタングループを設定するには、プロパティを: