css - ホバー効果のあるナビゲーションボタン

Question

このページhttp://oakespavers.com/（左側）のボタンのスタイルを同じホバー効果で複製したいと思います。試すたびに、ボックス内のテキストのみが影響を受けます。div全体でマウスオーバー時に色を変更し、コードを非常にシンプルに保ちたいです。

Answer 1

これはそれをするかもしれません：

HTML：

<a href="#">Home</a>
<a href="#">Our Blog</a>
<a href="#">Contact US</a>
​

CSS：

a {
    border-radius: 5px;
    font-weight: 600;
    text-align: left;
    font-family: "Verdana", "Geneva", "sans-serif";
    text-transform: none;
    letter-spacing: 0px;
    font-weight: bold;
    font-size: 12px;
    display: block;
    padding: 10px 20px;
    color: #666;
    background-color: #E1E1E1;
    text-decoration: none;
    width: 225px;
    margin: 5px;
}
a:hover {
    color: white;
    background-color: #75D039;
}

これが例 のあるフィドルです</p>