html button標籤的樣式怎麼設定？ html button標籤的樣式介紹-html教學-PHP中文網

首頁

web前端

html教學

html button標籤的樣式怎麼設定？ html button標籤的樣式介紹

寻∝梦

Sep 03, 2018 pm 05:12 PM

button html

本篇文章主要的介紹了關於HTML button標籤的樣式設置，還有關於HTML button標籤的美化樣式介紹，接下來就讓我們一起來閱讀本篇文章吧

##首先我們先介紹HTML中的button標籤的樣式設定：

普通按鈕設定：

把input元素的type屬性設定為“button”，可以創建普通按鈕。按鈕上顯示的文字是value屬性的值，如果沒有提供value屬性，則只建立一個空按鈕。如：

<input type="button" value="立即购买">

登入後複製

html button標籤的樣式怎麼設定？ html button標籤的樣式介紹

效果很明顯，這是預設普通按鈕的設定。

預設情況下，在普通按鈕上點擊，是沒有任何反應的。因此，需要為普通按鈕註冊事件，並手動編寫對應的處理函數。如果您希望點擊上述按鈕時，提交表單，則要為按鈕註冊onClick 事件。如：

<form name="buy" action="form.html" method="post">
    <button onClick="submitForm(buy)">立即购买</button>
</form>

登入後複製

現在點選按鈕，就會觸發onClick事件，並呼叫事件處理函數submitForm(buy)，參數buy為待處理表單name屬性的值。如果希望點擊按鈕後提交表單，就可以在事件處理函數中呼叫form物件的submit()方法：

function submitForm(f) {
    f.submit();  
}

登入後複製

這是預設情況的設置，現在我們來看看給html button標籤設定樣式：

給大家看一個完整的程式碼實例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
.div {
    display: inline-block;
    padding: .3em .5em;
    background-image: linear-gradient(#ddd, #bbb);
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3em;
    box-shadow: 0 1px white inset;
    text-align: center;
    text-shadow: 0 1px 1px black;
    color:white;
    font-weight: bold;
}
.div:active{
    box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
    border-color: rgba(0,0,0,.3);
    background: #bbb;
}
</style>
</head>
<body>
<div class="div">Button</div>
</body>
</html>

登入後複製

這個的效果如圖：

html button標籤的樣式怎麼設定？ html button標籤的樣式介紹