鼠標放上去會變色的按鈕

鼠標放上前效果：

鼠標放上后效果：

 

代碼如下：

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;
}