Reputation: 13

CSS Styling Issues

Code:

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

Then I have some HTML:

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

When I view it it shows the default link colors, but the round button changing color works. I looked on W3Schools, and their example looks like mine, but works. Help?

Upvotes: 0

Answers (3)

Matthew Johnson

Reputation: 5155

The HTML:

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

The CSS

.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;
  margin:0 auto;
}
.RoundButton:hover {color: #000000;border: 5px solid #ff0000;}
.RoundButton:active {color: #000000; border: 5px solid #0000ff;}
a:link {color: #000000;}
a:visited {color: #000000;}

The fiddle.

I centered the div using margin:0 auto instead of the <center> tag, and adjusted the CSS.

Upvotes: 0