Stylish Buttons with CSS

We were asked today to recreate a button in CSS. This was the goal:

The only html code supplied was:
&#60a href="#"&#62
  Checkout
&#60/a&#62

We were not allowed to alter the HTML at all. All styling had to be done in CSS.

When approaching this, I decided to start with the simple elements of the button, and add on detail after getting the basics down. This meant getting the basic shape and color of the button, and getting a match on the font.

First I changed the background color to an appropriate shade of grey (#CCC). I then set the display to be a block element, since the button will have a height. I centered the text, added some margin and padding, and set a fixed width to get the basic button structure. Then I just had to add a border radius and I had the basic outline of the button.

Screen Shot 2013-12-31 at 2.52.34 PM

Next I wanted to get to work on the font. I used the transform attribute to make all the characters uppercase, and then removed the text decoration from the link. I changed the color to grey and bolded the font to get it a little closer to how the button looks. I then compared the button to some common fonts and decided that it was closest to Helvetica. I set that, with Arial and sans-serifs as backups, as the font-family. The last touch was to adjust the font-size to 22px so as to not leave it up to the browser.

To get the stars before and after the “checkout” word, I used the :before and :after pseudo classes with the content attribute. This let me insert unicode stars before and after the content inserted via html.

Screen Shot 2013-12-31 at 3.40.21 PM

Next I got started on the border. First I looked into using a box shadow surrounded by a border, but soon confirmed that only one border can be used, and this would result in only two borders. I did some digging into how I could style an element to have more than one and discovered that, lo and behold, a single element can have multiple box shadows! You can separate them with commas. One thing to note is that the shadows overlap, with the ones listed first being in the foreground. So if you want the inner shadow to be two pixels wide and the outer shadow to be three pixels wide, you should assign the outer shadow a pixel width of five.

I used a series of five box shadows with varying widths and colors to create the layered borders.

Screen Shot 2013-12-31 at 4.40.03 PM

Then there were just some finishing touches. I added the subtle text shadow and generated code for a gradient with Colorzilla’s gradient generator. And that gave the final effect! Here’s my final button on the left, with the original target image on the right. Pretty close.

Screen Shot 2013-12-31 at 4.53.03 PM Screen Shot 2013-12-31 at 4.58.58 PM

And here’s the final code:

You may also like...

Leave a 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=""> <s> <strike> <strong>