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 屬性來設定"hover" 效果的速度:
php中文网(php.cn) 鼠标悬停按钮
#執行程式看一下
按鈕陰影
#陰影按鈕 滑鼠懸停後顯示陰影
我們可以使用 box-shadow 屬性來為按鈕新增陰影:
php中文网(php.cn) 按钮阴影
執行程式來看看
停用按鈕
######我們可以使用 opacity 屬性為按鈕新增透明度(看起來類似"disabled" 屬性效果)。 #########提示###: 我麼可以新增 cursor 屬性並設定為"not-allowed" 來設定一個停用的圖片:#############執行程序看一下######################################### 預設情況下，按鈕的大小有按鈕上的文字內容決定( 根據文字內容匹配長度)。 我們可以使用 width 屬性來設定按鈕的寬度:#########提示###: 如果要設定固定寬度可以使用像素(px) 為單位，如果要設定響應式的按鈕可以設定為百分比。 ###php中文网(php.cn) 禁用按钮
#########執行程式看看###################php中文网(php.cn) 按钮宽度
按鈕群組
移除外邊界並新增 float:left 來設定按鈕群組:
##
php中文网(php.cn) 按钮组
移除外边距并添加 float:left 来设置按钮组:
记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。
執行程式看看
帶邊框按鈕群組
我們可以使用 border 屬性來設定帶邊框的按鈕群組:
執行程式來看看php中文网(php.cn) 带边框按钮组
Add borders to create a bordered button group:
记住要清除浮动，否则下一个 p 元素的按钮也会显示在同一行。
按鈕動畫
滑鼠移到按鈕上後新增箭頭標記:
php中文网(php.cn) 按钮动画
執行程式看看
點擊時加入"波紋" 效果:
php中文网(php.cn) 按钮动画 - 波纹效果
執行程式看一下
點擊時新增"壓下" 效果:
php中文网(php.cn) 按钮动画 - "按压效果"
執行程式來看
