css button 四种状态,css中按钮的四种状态

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;

}