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)
- 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 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.
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.
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: