首先我們先介紹HTML中的button標籤的樣式設定：
普通按鈕設定：
把input元素的type屬性設定為“button”，可以建立普通按鈕。按鈕上顯示的文本是value屬性的值，如果沒有提供value屬性，則只建立一個空按鈕。如：
<input type="button" value="立即購買">
效果很明顯，這是預設普通按鈕的設定。
預設情況下，在普通按鈕上點擊，是沒有任何反應的。因此，需要為普通按鈕註冊事件，並手動編寫相應的處理函數。假如希望單擊上述按鈕時，提交表單，則要為按鈕註冊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>topic.alibabacloud.com</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>
這個的效果
這個的效果是不是很明顯，比預設的時候好看多了，等到我們學到js的時候，我們還能用js的技術把這預設的按鈕設定的更加美觀。
好了，以上就是關於html button標籤的樣式設定，還有美化樣式的總結(想學更多就來topic.alibabacloud.com)，有問題的可以在下方提問。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
