Input Button States

HTML

<input type="text"/><input type="button" id="btn" value ="GO"/>
<br>
<ol>
    <li>Normal (initial state --> grey)</li>
    <li>Hover (move mouse over and hover --> light pink)</li>
    <li>Active (click and hold mouse, drag out --> darker pink)</li>
    <li>Focused (release mouse --> beige ...usually it would return to grey, but I made it beige for demonstration purposes)</li>
</ol>
<span>Note that hover or active states can happen simultaneously with focus state</span>

CSS

#btn{
    color:black;
    border: 1px solid gray;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    height: 21px;
    background: rgb(221, 221, 221);
}

#btn:hover, #btn:hover:focus{
    background:blue;
    color: white;
}

#btn:active,#btn:active:focus{
    background:black;
    color: white;
}

#btn:focus{
   background:purple;
}