縁取りボタン #CSS

こんな感じで縁取ったボタン
IEは未確認（IE8ではだめ）
<!DOCTYPE html>
<html>
<head>
<style>
.button {
    text-align: center;
    border: solid 2px #527ACC;
    border-radius: 5px;
    padding: 1px;
    background-color: #fff;
}

.button button,
.button a {
    padding: 0.6em 0 0.6em;
    color: #fff;
    background-color: #527ACC;
    cursor: pointer;
    width: 100%;
    border-radius: 3px;
    display: block;
}

.button button {
    border: none;
}

/* カーソルあてると色を変える */
.button:hover {
    cursor: pointer;
    border: solid 2px #94B8FF;
}
.button button:hover,
.button a:hover {
    background-color: #94B8FF;
}

.button a:link { text-decoration: none;}
.button a:visited { text-decoration: none;}
.button a:active { text-decoration: none;}

</style>
</head>
<body>
<div class="button">
    <button type="button"><span>button</span></button>
</div>
<br>
<div class="button">
    <a href="#"><span>a</span></a>
</div>
</body>
</html>