html - CSS スタイリングの問題

Question

コード：

<style>
    .RoundButton
    {
      text-align: center;
      text-decoration: none;
      font-size: 34px;
      width: 70px;
      height: 40px;
      background-color: #ffffff;
      border-radius: 15px;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
      border: 5px solid #000000;
      padding: 5px;
    }
    .RoundButton:link {color: #000000;}
    .RoundButton:visited {color: #000000;}
    .RoundButton:hover {color: #000000;border: 5px solid #ff0000;}
    .RoundButton:active {color: #000000; border: 5px solid #0000ff;}
</style>

それから私はいくつかのHTMLを持っています:

<center><a href="https://www.google.com" target="blank"><div class="RoundButton">Hi</div></a></center>

表示すると、デフォルトのリンクの色が表示されますが、色を変更する丸いボタンは機能します。私は W3Schools を調べました。その例は私のものに似ていますが、機能します。ヘルプ？