I am trying to link buttons using a button tag that is set to show a button made with CSS3.
The button works and display properly in Chrome and Safari but in FireFox the button shows but it doesn’t link, it also messes up the style of the page a bit.
I know you use to not be able to use the
The link to the page is here http://pt11.com/index2.php?x=videos.html
Here is my HTML:
<head>
<link rel="stylesheet" type="text/css" href="videos.css" />
</head>
<br>
<div class="vidholder">
<div class="textbox">
<h2>Eythor Bender at TEDMED 2011</h2>
</div>
<div class="textbox2">
Eythor Bender's Ekso Bionics makes powered, wearable robots known as "exoskeletons" that boost human strength, endurance, and mobility. But can they help a paraplegic walk? Watch this incredible story.
</div>
<div class="img">
<img src="ted.png">
</div>
<button type="button" name="" value="" class="css3button"><a href="http://www.youtube.com/watch?feature=player_embedded&v=tgWrCNH9gHc" target="_blank">Watch Video</a></button>
</div>
<br>
</div>
Then the CSS for the button
button.css3button {
padding
margin:-3px 0px 0px 325px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#ff2819 0%,
#ab0000);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ff2819),
to(#ab0000));
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border: 1px solid #7d0000;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px 1px 0px rgba(255,255,255,0.3);
}
Is there a reason that you need the button element? Why not just use
and change your css selector to match. That would apply the styles to the anchor, remove the need for the button element, and it would work in all browsers.