HTML按鈕屬性
border:none; 去掉按鈕的邊框陰影
border: 1px solid #eee; 按鈕邊框粗細和顏色
background-color: #7ED321; 設置按鈕背景顏色
color: #FFFFFF"; 設置按鈕中文字顏色
border-radius: 15px / 50%; 圓角按鈕
text-align: center; 文字在按鈕中居中
text-decoration: none; 下划線
font-size: 16px; 字體大小
cursor: pointer; 在鼠標與按鈕觸碰時,鼠標指針的形狀變成一只伸出食指的手
------
其他好看的按鈕樣式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>button按鈕樣式</title> <style> .button1 { -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 16px 32px; text-align: center; background-color: white; color: black; border: 2px solid #4CAF50; border-radius:5px; } .button1:hover { background-color: #4CAF50; color: white; } </style> </head> <body> <button class="button1">Green</button> </body> </html>
相關屬性介紹:
transition-duration 屬性規定完成過渡效果需要花費的時間,-webkit-transition-duration屬性是為了兼容瀏覽器Safari。
text-align屬性時規定元素中的文本的水平對齊方式,值為center表示文本水平居中。
border-radius 屬性可以讓您為元素添加圓角邊框。
:hover 選擇器用於選擇鼠標指針浮動在上面的元素,簡單的說就是當鼠標移動到指定元素上時設置新的樣式。
相關標簽介紹:
<button> 標簽定義一個按鈕。
這里我們在body中使用的是<button> 標簽,當然我們也可以使用div:
<div class="button1">Green</div>
注意,當我們使用div時需要給這個div設置寬度width,那么效果如下: