CSS 按鈕滑入、滑出、按下、停用樣式 input button css style hover click disable

:focus       // 焦點
:active      // 按下
:hover      // 滑出
:disabled  // 停用

<style type=”text/css”>
/* 原始 */
input[type=”button”]{
background:#F00;
border:2px solid #F00;
padding:10px;
}
/* 滑入 */
input[type=”button”]:hover{
background:#0F0;
background:inherit;
}
/* 按下 */
input[type=”button”]:active{
background:#00F;
background:inherit;
}
/* 焦點 */
input[type=”button”]:focus{
border:2px solid #00F;
background:inherit;
}
/* 停用 */
input[type=”submit”]:disabled{
background:#EBEBEB;
border:2px solid #ccc;
color:#999;
padding:10px;
}
</style>
<input type=”button” name=”button” id=”button” value=”正常按鈕” />
<input type=”submit” name=”button” id=”button” value=”停用按鈕” disabled=”disabled” />

如果文章對您很有幫助
請我喝杯咖啡吧

Bitcoin 比特幣錢包:

38ieWXhURt27br9XrDoCeo4eruzKyi8QKs



ann71727

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料