html button標籤的樣式怎麼設定？ html button標籤的樣式介紹
- 寻∝梦原創
- 2018-09-03 17:12:3922246瀏覽
本篇文章主要的介紹了關於HTML button標籤的樣式設置，還有關於HTML button標籤的美化樣式介紹，接下來就讓我們一起來閱讀本篇文章吧
##首先我們先介紹HTML中的button標籤的樣式設定：
普通按鈕設定：
把input元素的type屬性設定為“button”，可以創建普通按鈕。按鈕上顯示的文字是value屬性的值，如果沒有提供value屬性，則只建立一個空按鈕。如：<input type="button" value="立即购买">
<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單選按鈕預設選取怎麼做？ input標籤的單選按鈕用法實例
以上是html button標籤的樣式怎麼設定？ html button標籤的樣式介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn