I liked the style of your button and thought, "that would be pretty easy and fun to CSS3-ify". So I did. Obviously not expecting you to jump on this but if you wanted to check it out I uploaded it to http://v-t-g.me/a/-/26
I checked it in Firefox (Mac), Chrome (Mac), Safari (Mac), Opera (Mac) and IE7 and it's not all that necessary but I'm using Modernizr for browsers that don't support CSS3 gradients
I've been drawn to coding up buttons because it's easier for me to change some code then to go through exporting an image from PS. In this case I'll admit it, I got lazy and just used your image for browsers that don't support gradients but if this was for a production site I would honestly just go without the gradient for browsers that don't support it. That way if I wanted to use that same button style throughout the site I could do that regardless of how much text was in the button, how big the text is and just as easily change the colors (I'm sure you already know this stuff).
You could even add a transparent texture image on the anchor while keeping the background-color as well to give it that textured look you have on the website (it's late so I just noticed that it looks like you have a little bit of texture on that button).
3 Responses
I liked the style of your button and thought, "that would be pretty easy and fun to CSS3-ify". So I did. Obviously not expecting you to jump on this but if you wanted to check it out I uploaded it to http://v-t-g.me/a/-/26
I checked it in Firefox (Mac), Chrome (Mac), Safari (Mac), Opera (Mac) and IE7 and it's not all that necessary but I'm using Modernizr for browsers that don't support CSS3 gradients
over 2 years ago
Pro
Matthew Skiles
Awesome work Trevor! I really must start making more buttons in code instead of PS :)
over 2 years ago
I've been drawn to coding up buttons because it's easier for me to change some code then to go through exporting an image from PS. In this case I'll admit it, I got lazy and just used your image for browsers that don't support gradients but if this was for a production site I would honestly just go without the gradient for browsers that don't support it. That way if I wanted to use that same button style throughout the site I could do that regardless of how much text was in the button, how big the text is and just as easily change the colors (I'm sure you already know this stuff).
You could even add a transparent texture image on the anchor while keeping the background-color as well to give it that textured look you have on the website (it's late so I just noticed that it looks like you have a little bit of texture on that button).
over 2 years ago