button被点击后的蓝框 css button 的四种状态

button被点击后的蓝框去除： outline:none, 很多标签都可以用outline：none

---

1.普通状态2，鼠标hover状态 3.active 点击状态 4.focus 取得焦点状态

focus 经常用来取消a链接点击后产生的虚线边框

a:focus{
outline: none;
}

<style type="text/css">
    .btn {
        color: white;
        background-color: #008aa6;
        padding: 0px 1em;
        height: 22px;
        margin-left: 10px;
        border: 0px solid black;
        border-radius: 5px;
    }


    .btn:hover {
        background-color: #ff0000;
    }


    /*active 要在后面 否则会被hover覆盖*/


    .btn:focus {
        background-color: #00ff00;
    }


    .btn:active {
        background-color: #000000;
    }
</style>

hehhe