-1

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);
         }
1
  • You have two doctypes. Remove the one on the very first line.
    – Rob
    Apr 16, 2012 at 15:45

1 Answer 1

1

Is there a reason that you need the button element? Why not just use

<a class="css3button">

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.

1
  • Thanks, I ended up going that route. Apr 16, 2012 at 16:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.