HTML Button with CSS

Question

I have this CSS for a button-

a.button {
   border-top: 1px solid #7f93bc;
   background: #7f93bc;
   background: -webkit-gradient(linear, left top, left bottom, from(#7f93bc), to(#7f93bc));
   background: -moz-linear-gradient(top, #7f93bc, #7f93bc);
   padding: 10.5px 21px;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 18px;
   font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
a.button:hover {
   border-top-color: #0e1f5b;
   background: #0e1f5b;
   color: #ffffff;
    }
a.button:active {
   border-top-color: #0e1f5b;
   background: #0e1f5b;
   }

The below turns out a link. I want to make it turn out a button in the above style. What can I replace the below with?

$theOffers .= "<br><li class=\"gateway-offer\"><a href=\"http://fakeurlforanon/aff_c?offer_id=".$offer['id']."&aff_id=$affiliateId\" target=\"_blank\">$offer[name]</a></li><br>";

John Green · Accepted Answer · 2011-05-20 01:54:46Z

2

Just add the class to the tag:

...ffer\"><a class=\"button\" href=\"http://fakeurlf...

answered May 20, 2011 at 1:54

John Green

13.5k3 gold badges31 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

John Green Over a year ago

You'll need to add a demo. You have 3 responses, all substantively the same... so you've got some other issue somewhere else.

John Green Over a year ago

Um.. Looks the way I would expect it to here. Just like a facebook button, right?

Shane G Over a year ago

It's loading right in chrome, displaying a link in firefox, and showing a blue bar in IE. Had to remove the button code for the time being... its currently in live use and need IE traffic.

John Green Over a year ago

I just tested it in FF (added the button class through FireBug) and it looked correct there. You might have to flush your cache if you just adding the class into your stylesheet.

Shane G Over a year ago

Will try that. Now with IE, I can hover over the button but the button wont initially display no matter what color it is.

|

Ben Hull · Accepted Answer · 2011-05-20 02:12:25Z

1

Looks like you just need to add class="button" to your anchor tag, like so:

$theOffers .= "<br><li class=\"gateway-offer\"><a class=\"button\" href=\"http://fakeurlforanon/aff_c?offer_id=".$offer['id']."&aff_id=$affiliateId\" target=\"_blank\">$offer[name]</a></li><br>";

That should make it pick up all the button styling you already have.

edited May 20, 2011 at 2:12

answered May 20, 2011 at 1:56

Ben Hull

7,6653 gold badges40 silver badges58 bronze badges

6 Comments

Shane G Over a year ago

This caused the entire page to not load.

Ben Hull Over a year ago

Oops - I forgot to escape the quotes around the button tag. Updated now.

Shane G Over a year ago

hmm still loaded a link. Must be conflicting with something else on the page. Thanks for your efforts =)

Ben Hull Over a year ago

The 'You Won' button appears like a button to me dark blue background with white text. The styles from your original post are being applied correctly, too. Caching problem at your end, maybe?

Shane G Over a year ago

Got it working in Chrome and FF. IE just isnt displaying until you hover over it.

|

Marty · Accepted Answer · 2011-05-20 01:58:20Z

0

You forgot to actually specify that the <a> should be of class button.

$theOffers .= '
<br />
<li class="gateway-offer">
    <a class="button" href="http://fakeurlforanon/aff_c?offer_id=' . $offer["id"] . '&amp;aff_id=' . $affiliateId. '" target="_blank">' . $offer["name"] . '</a>
</li><br />';

answered May 20, 2011 at 1:58

Marty

39.5k19 gold badges97 silver badges164 bronze badges

Collectives™ on Stack Overflow

HTML Button with CSS

3 Answers 3

7 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related