Greekgeek's Online Odyssey - Hubpages and Online Article Writing Tips

A New All-CSS Amazon / Zazzle Button

I hadn’t posted this until now, because I’m still getting the kinks out. But I thought I’d share some CSS wizardry.

Problem:

My old Amazon “Buy” Buttons look a little fuzzy at modern screen resolutions, and they don’t resize well.
Amazon Associates

Also, that’s just for Amazon. Sometimes I want a Zazzle button!

I believe in the marketing research that shows a “Big Orange Button” helps convert sales.

So how can I make a BOB that will scale to different screen sizes?

Solution:

Create a rounded-corners button with CSS:

Buy on Amazon

 

 

blizzard of '78 t-shirt
Buy T-shirt on Zazzle

I’m still fine-tuning this, but people who know code can play with it.

Here’s an example from my spruced-up “Blizzard of ’78” lens.

Here’s a template for the button. You MUST change the width (11em) to fit the width of whatever words you use. For example,  in”Buy on Amazon” button, I used 8.5em.  An em is simply the width of the letter m, so this means that the dimensions listed in ems will scale up and down to match the text.
<a style=”display: block; margin: 5px auto; width: 11em; color: #fff; text-decoration: none; font-family: Arial; font-size: 90%; font-weight: bold; text-align: center; border-radius: .5em; padding: .2em; background-color: #f90; box-shadow: 1px 1px 2px #888888; background-image: linear-gradient(to top, #FF9900 60%, #FFBB44 100%);” href=”LINKgoesHERE”>Buy T-shirt on Zazzle</a></p>
I was a bit haphazard in which dimensions I specified in pixels, which in ems. I think this looks good at different screen resolutions, as I’ve checked with my iPad and this Responsive Design Tester, but… I can’t promise.
Breaking it down:
  • display: block; turns the span into a block-shaped area with specific dimensions.
  • the margin is whitespace around the outside of the button. Use margin: 5px; if you do NOT want the button centered horizontally (auto)!
  • the width is the width of the orange button, which I defined in terms of the width of the letters inside. This way the button grows or shrinks with the font and screen size.
  • color: #fff makes white letters; after this comes a bunch of optional text-tweaking.
  • border-radius: makes rounded corners on most modern browsers. On older browsers, you get rectangular corners, which isn’t too bad.
  • padding puts space between the borders of the orange rectangle and the words inside.
  •  background-color #f90 makes Squidoo Orange.
  • box-shadow: is a new CSS3 property, supported by IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1. On older browsers, no shadow. The values are: horizontal offset, vertical offset, blur distance, color.
  • linear-gradient: In theory, this will add a bit of shading, with darker orange at the bottom and lighter orange at the top. It’s part of CSS3, but not all browsers support it… yet. They will. In the meantime, I could go with all sorts of complicated code to make it work. But I’m not gonna. There’s nothing wrong with buttons that look good now, and will look better down the road.

Here’s a demo of how this button looks on browsers that DON’T support the linear gradient, and those that DO. (Modern editions of all browsers support rounded corners and drop shadow; older IE will just show an orange rectangle with no shadow.)

3 Comments

  1. Kimbesa says:

    Thanks so much! My code is a bit rusty, but I agree about the BOB and didn’t know how some were accomplishing it. Gotta have Amazon orange!

  2. Louanne says:

    Thanks Ellen that looks so much better than what I’ve been using.

  3. Kindoak says:

    Wow that button looks awesome. My coding skills are so-so and this will come in handy. Thanks!

Leave a Reply to Louanne Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

WP-SpamFree by Pole Position Marketing

Currently you have JavaScript disabled. In order to post comments, please make sure JavaScript and Cookies are enabled, and reload the page. Click here for instructions on how to enable JavaScript in your browser.