CSS ボタン
- 実際に試してみる CSS マスク
- 前のページ CSS ページネーション
CSSを使ってボタンのスタイルを設定する方法を学びます。
基本按钮样式
ボタンを上下にグループ化するのではなく、並べ替える：
インスタンス background-color: #4CAF50; /* 緑 */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; display: block;
按钮颜色
次を使用してください： background-color 属性更改按钮的背景色：
ボタンを上下にグループ化するのではなく、並べ替える：
.button1 {background-color: #4CAF50;} /* 绿色 */
.button2 {background-color: #008CBA;} /* 蓝色 */
.button3 {background-color: #f44336;} /* 红色 */
.button4 {background-color: #e7e7e7; color: black;} /* 灰色 */
.button5 {background-color: #555555;} /* 黑色 */
按钮尺寸
次を使用してください： font-size 属性更改按钮的字体大小：
ボタンを上下にグループ化するのではなく、並べ替える：
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
次を使用してください： padding 属性更改按钮的内边距：
ボタンを上下にグループ化するのではなく、並べ替える：
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
圆角按钮
次を使用してください： border-radius 属性为按钮添加圆角：
ボタンを上下にグループ化するのではなく、並べ替える：
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
カラフルなボタンフレーム
次を使用してください： ボタングループにボーダーを追加するための属性： 属性を使用してボタンにカラーフレームを追加する：
ボタンを上下にグループ化するのではなく、並べ替える：
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* 緑 */
display: block;
...
ホバー可能なボタン
マウスがボタンに移動するときに使用する :hover 選択子を使用してボタンのスタイルを変更できます。
ヒント：次を使用してください： transition-duration 属性を使用して「マウスオーバー」効果の速度を決定します：
ボタンを上下にグループ化するのではなく、並べ替える：
インスタンス
transition-duration: 0.4s;
display: block;
.button:hover {
background-color: #4CAF50; /* 緑 */
color: white;
display: block;
...
影ボタン
次を使用してください： box-shadow 属性を使用してボタンに影を追加する：
ボタンを上下にグループ化するのではなく、並べ替える：
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
display: block;
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
display: block;
無効なボタン
次を使用してください： opacity 属性を使用してボタンに透明度を追加し（「無効」外観を作成します）。
ヒント：「not-allowed」値を持つ cursor 属性を使用して、マウスをボタンに乗せたときに「no parking sign」（禁停標識）を表示する：
ボタンを上下にグループ化するのではなく、並べ替える：
.disabled {
opacity: 0.6;
cursor: not-allowed;
display: block;
ボタン幅
デフォルトでは、ボタンのサイズはテキスト内容に依存しています（内容の幅と同じ）。次を使用してください： width 属性を使用してボタンの幅を変更する：
ボタンを上下にグループ化するのではなく、並べ替える：
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
ボタんグループ
外边距を削除し、各ボタンに追加 置き換え、ボタングループを作成するため：
ボタンを上下にグループ化するのではなく、並べ替える：
インスタンス 属性を使用してボタングループにボーダーを追加： display: block;
ボタングループ
垂直ボタングループ ボタングループにボーダーを追加するための属性： border
ボタンを上下にグループ化するのではなく、並べ替える：
インスタンス 属性を使用してボタングループにボーダーを追加： float: left; display: block;
border: 1px solid green;
垂直ボタングループ 使用 display:block 置き換え float:left
ボタンを上下にグループ化するのではなく、並べ替える：
インスタンス
.button {
display: block;
ボタン
アニメーションボタン
インスタンス 1
ホバー時のマウス
インスタンス 2
クリック時の「ボタン押下」効果を追加：
インスタンス 3
ホバーでフェードイン
インスタンス 4
- 実際に試してみる CSS マスク
- 前のページ CSS ページネーション
