HTML按鈕屬性


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>


91.gif注意,當我們使用div時需要給這個div設置寬度width,那么效果如下:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM