css中button按鈕的狀態有哪些?

來源:互聯網
上載者:User
本篇文章主要給大家介紹關於css button按鈕的多種狀態。希望對有需要的朋友有所協助。

首先給大家舉一段button按鈕的狀態碼樣本如下:

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>button按鈕的狀態碼不同效果樣本</title>    <style>        .btn{            appearance: none;            background: #026aa7;            color: #fff;            font-size: 20px;            padding: 0.65em 1em;            border-radius: 4px;            box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.2);            margin-right: 1em;            cursor: pointer;            border:0;        }        .btn1:hover{            box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.6), 0 0 8px 0 rgba(0,0,0,0.5);        }        .btn1:focus{            position: relative;            top: 4px;            box-shadow: inset 0 3px 5px 0 rgba(0,0,0, 0.2);            outline: 0;        }        .btn2:hover{            box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.6), 0 0 8px 0 rgba(0,0,0,0.5);        }        .btn2:active{            position: relative;            top: 4px;            box-shadow: inset 0 3px 5px 0 rgba(0,0,0,0.2);            outline: 0;        }        .btn2:focus{            outline: 0;        }    </style></head><body><button class="btn btn1">點擊不會彈起</button><button class="btn btn2">點擊會彈起</button></body></html>

以上代碼可直接複製粘貼在本地測試,效果如:


綜上所述,給大家總結一下關於button按鈕的幾種狀態:

  1. 普通狀態

  2. hover 滑鼠移至上方狀態

  3. active 點擊狀態

  4. focus 取得焦點狀態

註:.btn:focus{outline:0;} 可以去除按鈕或a標籤點擊後的藍色邊框

cursor 屬性規定要顯示的游標的類型(形狀)。該屬性定義了滑鼠指標放在一個元素邊界範圍內時所用的游標形狀

:active 選取器用於選擇活動連結。當您在一個連結上點擊時,它就會成為活動的(啟用的)。

希望本篇關於button狀態的不同情況介紹,對有需要的朋友有所協助。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.