鼠标放上去会变色的按钮

鼠标放上前效果：

鼠标放上后效果：

 

代码如下：

HTML代码：

<button class="btn">LEARN MORE</button>

CSS代码：

.btn {
    color: white;
    background-color: #e1e1e1;
    padding: 0px 1em;
    width:915px;
    height: 45px;
    margin-left:-110px;
    border: 0px solid black;
    margin-top:150px;;
}


.btn:hover {
    background-color: #2579d1;
}


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


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


.btn:active {
    background-color: #000000;
}

转载于:https://www.cnblogs.com/ritazhang/p/6110366.html