css中按鈕有四種狀態

普通狀態

hover 鼠標懸停狀態

active 點擊狀態

focus 取得焦點狀態

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

下面的例子中.btn1用focus按鈕會按下，不彈起

.btn2用active按鈕點擊按下，會彈起

html：

Save Settings

Submit

CSS：

.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;

}

總結

以上是生活随笔為你收集整理的css button 四种状态,css中按钮的四种状态的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。