CSS Help? No idea how to best build this button…

[FFRedshirt]

So as usual a design gets approved by client before the dev people get a chance to look at it.

I just got handed this button and need to somehow make it. Any ideas?

I’m guessing it’ll have to be a hodge podge of nested divs within an anchor tag (excessive markup). Yuck!

How would you guys approach this thing?

Thanks!

[Anonymous]

Image isn’t working.

[FFRedshirt]

Here’s my version of it:

http://cdpn.io/buqDc

[TheDoc]

Forked @FFRedshirt’s version so that it doesn’t use a background image: http://codepen.io/ggilmore/pen/751999d7462fbbb2d915a61dafc1a708

I don’t like the fact that I’m using an additional element (``). I’m sure somebody with a little more time can work out a way to not use it.

[SilverSerpent]

This is what I came up with: http://cdpn.io/saknv

[Anonymous]

@FFRedshirt Haaaaa. Not sure if trolling or if hes serious about that.

[FFRedshirt]

@Jarolin who are you referring to? Me? I wasnt trying to troll :)

[FFRedshirt]

@TheDoc yeah that was something I was attempting to avoid. I do like how your version has no background image and on top of that it will adjust based on the text.

@SilverSerpent nice one! You guys have all impressed me without the background LOL.

@gcyrillus i love how easily you can change color in your version. But you’re missing the top strip of what the Art Director called “depth” LOL!

Overall you guys amazed me with your responses! Thanks everyone!

[FFRedshirt]

So what do you guys suggest if I want this to look decent in IE8? Whats the best way to gracefully degrade?

[CodeGraphics]

@TheDoc, pls can you rewrite yours in pure css? No sass.

[FFRedshirt]

@CodeGraphics, here is @TheDoc’s version in pure CSS. http://codepen.io/ants/pen/omBLj

It works alright except in IE8 theres an underline under the arrow for some reason

[FFRedshirt]

Got rid of the underline by adding text-decoration: none to the anchor styles

[CrocoDillon]

For IE8, you’ll lose box-shadow so you need a border or a slightly off-white background color for the white part (unless the page background is not white) and you lose the border-radius and rgba colors. Other then that, here’s my version based on some of the previous suggestions: http://jsfiddle.net/kAJmq/

I skipped the hover effect but at least it looks good enough in IE8 :)

[CodeGraphics]

@Crocodillon, pls tell me how you learned javascript.
I can see u are good with it.
Which online training do u recommend?
I have been thinking of codeschool.com.

[Author]

Posts