- This topic is empty.
-
AuthorPosts
-
June 3, 2013 at 5:14 pm #45131
FFRedshirt
ParticipantSo 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!
June 3, 2013 at 5:23 pm #137500Anonymous
InactiveImage isn’t working.
June 3, 2013 at 6:06 pm #137503FFRedshirt
ParticipantHere’s my version of it:
June 3, 2013 at 7:35 pm #137517TheDoc
MemberForked @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.
June 3, 2013 at 9:18 pm #137521SilverSerpent
ParticipantThis is what I came up with: http://cdpn.io/saknv
June 3, 2013 at 9:51 pm #137523Anonymous
Inactive@FFRedshirt Haaaaa. Not sure if trolling or if hes serious about that.
June 3, 2013 at 10:45 pm #137532FFRedshirt
Participant@Jarolin who are you referring to? Me? I wasnt trying to troll :)
June 3, 2013 at 10:54 pm #137533FFRedshirt
Participant@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!
June 4, 2013 at 3:07 pm #137631FFRedshirt
ParticipantSo what do you guys suggest if I want this to look decent in IE8? Whats the best way to gracefully degrade?
June 4, 2013 at 3:56 pm #137639CodeGraphics
Participant@TheDoc, pls can you rewrite yours in pure css? No sass.
June 4, 2013 at 4:05 pm #137641FFRedshirt
Participant@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
June 4, 2013 at 4:11 pm #137643FFRedshirt
ParticipantGot rid of the underline by adding text-decoration: none to the anchor styles
June 4, 2013 at 4:36 pm #137652CrocoDillon
ParticipantFor 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 :)
June 4, 2013 at 4:52 pm #137655CodeGraphics
Participant@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. -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.