6 replies [Last post]
FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 3 years 10 weeks ago
Dublin, CA
Timezone: GMT-7
Joined: 2007-01-10
Posts: 176
Points: 44

I need some help styling this button. The thing that is throwing me off is the darker color on the outer border. I would like to create the entire thing using css with only a background image for a slight gradient. My first thought was to have the border color be the 2px lighter orange color border and have a 1px outline for the darker orange color but using border-radius to round the corners does not round the outline color. Any ideas on how I can achieve this? I know that firefox has the ability for multiple border colors using -moz-border-colors, but I would like to find a way that works in the majority of the newer browsers. Here is the code I have so far...

html
<div class="btn_order_wrap"><a class="button_order" href="#">Add to Cart</a></div>

css

a.button_order {
border:.2em solid #febf4d;
background:#fba213;
font-family:"Trebuchet MS", Helvetica, Arial, sans-serif;
font-size:1.4em;
font-weight: bold;
text-transform: uppercase;
color:#fff;
padding:3px 14px;
text-decoration:none;
line-height:1;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

I added a class to the div and added this..

.btn_order_wrap {
background:#e26703;
float:left;
padding:.6em 0;
line-height:1;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}

which works somewhat but seems like there would be a better way and it doesn't resize properly when text is resized.

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 3 years 10 weeks ago
Dublin, CA
Timezone: GMT-7
Joined: 2007-01-10
Posts: 176
Points: 44

oops the padding for the div

oops the padding for the div should be

.btn_order_wrap {
padding:.8em .1em;
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

It's not exactly like what

It's not exactly like what you're after, but have you seen: http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba ?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 3 years 10 weeks ago
Dublin, CA
Timezone: GMT-7
Joined: 2007-01-10
Posts: 176
Points: 44

I have seen that before,

I have seen that before, it's a good article.

Anyone have any ideas on how I could achieve essentially 2 border colors that would work cross browser?

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 3 years 10 weeks ago
Dublin, CA
Timezone: GMT-7
Joined: 2007-01-10
Posts: 176
Points: 44

Not possible?

Not possible?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

What if you put a box shadow

What if you put a box shadow on the anchor with the yellow glow colour? I think you can attach more than one box shadow with different colour and directions to an element so you might be able to create the glow effect by using different directions.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 3 years 10 weeks ago
Dublin, CA
Timezone: GMT-7
Joined: 2007-01-10
Posts: 176
Points: 44

Thanks for the idea, I'll

Thanks for the idea, I'll try and give that a shot..