CSSボタン
CSSボタン
この章では、CSSを使用してボタンを作成する方法を紹介します。
まずデフォルトのボタンとCSSで作成されたボタンを見てみましょう
php中文网(php.cn) CSS 按钮
链接按钮
プログラムを実行して確認してください
ボタンの色
background-color属性を使用してボタンの色を設定できます:
例
php中文网(php.cn) 按钮颜色
我们可以使用 background-color 属性来设置按钮颜色:
プログラムを実行して見てください
ボタンのサイズ
font-size属性を使用してボタンのサイズを設定できます:
例
php中文网(php.cn) 按钮大小
我们可以使用 font-size 属性来设置按钮大小:
プログラムを実行して見てみましょう
角丸ボタン
border-radius 属性を使用して角丸ボタンを設定できます:
php中文网(php.cn) 圆角按钮
我们可以使用 border-radius 属性来设置圆角按钮:
プログラムを実行して見てみましょう
ボタンの境界線の色
border属性を使用してボタンの境界線の色を設定できます:
php中文网(php.cn) 按钮边框颜色
我们可以使用 border 属性设置按钮边框颜色:
プログラムを実行して見てみましょう
マウスオーバーボタン
:hover セレクターを使用して、マウスホバーボタンのスタイルを変更できます。
ヒント:transition-duration 属性を使用して、「ホバー」効果の速度を設定できます:
php中文网(php.cn) 鼠标悬停按钮
プログラムを実行して見てください
ボタンの影
シャドウボタンマウスホバー後に影を表示
box-shadow 属性を使用してボタンに影を追加できます:
php中文网(php.cn) 按钮阴影
プログラムを実行して確認してください
無効化ボタン
不透明度属性をボタンに透明度を追加するために使用できます (「無効」属性効果のように見えます)。
ヒント: カーソル属性を追加し、それを「許可しない」に設定して、無効な画像を設定できます:
php中文网(php.cn) 禁用按钮
プログラムを実行して確認してください
ボタンの幅
デフォルトでは、ボタンのサイズはボタン上のテキストコンテンツによって決まります(テキストコンテンツに基づいて長さが一致します)。 width 属性を使用してボタンの幅を設定できます:
ヒント: 固定幅を設定したい場合は単位としてピクセル (px) を使用でき、レスポンシブボタンを設定したい場合は、パーセンテージとして設定できます。
えープログラムを実行して見てください
ボタングループ
余白を削除し、float:leftを追加してボタングループを設定します:
php中文网(php.cn) 按钮宽度
プログラムを実行して見てください
ベルトの境界ボタン グループ
border 属性を使用して、境界のあるボタン グループを設定できます:
php中文网(php.cn) 按钮组
移除外边距并添加 float:left 来设置按钮组:
记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。
プログラムを実行して確認してください
ボタン アニメーション
マウスがボタンの上を移動したら、矢印マークを追加します。プログラムを実行して見てください
クリック時に「押し下げ」効果を追加します:
php中文网(php.cn) 带边框按钮组
Add borders to create a bordered button group:
记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。
プログラムを実行して見てください
