鼠标放上前效果：

鼠标放上后效果：

 

代码如下：

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;

}