Shiny CSS Buttons, No Images Required

Screen shot 2013-03-15 at 4.20.46 PM

So the other day a friend of mine asked – how do I make these fancy buttons in CSS? I thought I should share the technique with the rest of you. It’s rather simple once you break it down into it’s components which are:

  • text (okay, that one’s kinda obvious)
  • icon
  • button background
  • button border
  • hover states

We’ll skip the text part, that’s some basic css styling, but you can see the example in the codepen.

The Icon

The icon is rendered via an :after psuedo element. The content of this element would be the white icon – it’s a character, not an image. Since it’s a character, I can then also define a background for the icon. I’ve made this background a circle through the use of css3′s border-radius. Note that the icon inherits it’s font colors and sizing from the button styles.

Check out this Pen!

The Background

The background is a CSS3 gradient. If I was implementing this in a real project I’d use something like Compass’s CSS3 mixins to improve the legibility of the code.  In this example I’m using a standard two stop linear gradient (with the added bonus of greater IE support), but you should play around with multiple stop or layered gradients for a nicer effect.

Check out this Pen!

The Border

Depending on your browser, your button may already have a nice looking border. We want to standardize this.

The border here is specified with a different color for each side. The colors vary slightly from the button background, giving the button a beveled effect. In this case the “light” is coming from the top left, so the top border, is the lightest, the left the second lightest, the right the third lightest, and the bottom the darkest.

The final code:

Check out this Pen!

 

This entry was posted in Uncategorized. Bookmark the permalink.

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