鼠标放上去会变色的按钮

鼠标放上前效果:

鼠标放上后效果:

代码如下:

HTML代码:

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

CSS代码:

.btn {
    color: white;
    background-color: #e1e1e1;
    padding: 0px 1em;
    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