CSSボタン
このセクションでは、我々はボタンを作成するために、CSSの使用を紹介します。
基本的なボタンのスタイル
CSSの例
背景色：＃4CAF50; / *グリーン* /
国境：なし;
色：白;
パディング：15ピクセル32PX;
テキスト整列：センター;
テキスト装飾：なし;
表示：インラインブロック;
フォントサイズ：16pxに;
}
»をお試しください
ボタンの色
我々は、使用することができbackground-colorボタンの色を設定するには、プロパティを：
CSSの例
.button2 {背景色：＃の008CBA;} / *ブルー* /
.button3 {背景色：＃1 f44336;} / *赤* /
.button4 {背景色：＃e7e7e7;色：黒;} / *グレー* /
.button5 {背景色：＃555555;} / *黒* /
»をお試しください
ボタンサイズ
我々は、使用することができfont-sizeボタンのサイズを設定するには、プロパティを：
CSSの例
.button2 {フォントサイズ：12ピクセル;}
.button3 {フォントサイズ：16pxに;}
.button4 {フォントサイズ：20ピクセル;}
.button5 {フォントサイズ：は24px;}
»をお試しください
丸みを帯びたボタン
我々は、使用することができますborder-radiusフィレットボタンを設定するには、プロパティを：
CSSの例
.button2 {国境半径：4PX;}
.button3 {国境半径：8px;}
.button4 {国境半径：12ピクセル;}
.button5 {国境半径：50％;}
»をお試しください
ボタンの境界線の色
我々は、使用することができborderボタンの境界線の色のプロパティを：
ホバーボタン
我々は、使用することができます:hoverボタンの上に置くとスタイルを変更するセレクタを。
ヒント：我々は、使用することができtransition-duration効果の速度を「ホバリング」するために設定するプロパティを：
CSSの例
-webkit-遷移期間：0.4秒; / *サファリ* /
遷移期間：0.4秒。
}
.button：ホバー{
背景色：＃4CAF50; / *グリーン* /
色：白;
}
...
»をお試しください
ボタンの影
我々は、使用することができ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ボーダーとボタングループを設定するには、プロパティを：