I'm a Web Designer and Front End Developer from Yorkshire, England. I love working with code and great design.


Published:

Simple Round Social Buttons

img-post-cover
A simple one to get us started. CSS3 has opened up a whole new range of cool little tricks you can use to save a lot of time and effort. This is a pretty simple bit of CSS but it's used everywhere. Let's get started.

Installing Font Awesome

Font Awesome is an icon-set disguised as a font. It allows you to quickly add a bunch of useful symbols into your markup without the hassle of painstakingly adding in images to achieve the same effect. Adding it your project is really easy too, just put the following in the head section of your html.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

That's it! You're ready to get coding. Full details on what you just did can be found here Font Awesome - Get Started Guide

The Code

This is the code we need to use to make our button.

HTML

<a href="#" class="social-button">
    <i class="fa fa-facebook"></i>
</a>

The HTML is really simple. The I tag is our Font Awesome tag, this one outputting the Facebook logo. That's wrapped in an anchor tag with the class of .social-button.

CSS

.social-button {
    background-color:red;
    height:2em;
    width:2em;
    line-height:2em;
    font-size:1.4em;
    color:white;
    text-decoration:none;
    display:inline-block;
    text-align:center;
    border-radius:50%;
}

It's pretty simple really, but the key is the border-radius attribute. Border Radius allows you to soften the edges of the rectangle every html element produces. Setting to 50% means that each corner is 50% of the total width or height, producing an oval. When the element is given an equal height and width, that oval becomes a circle.

Since we want our Social Button to be a link we're stuck with the anchor tag being an inline element. Inline elements have a hard time with height and width and while by default it's great for a link in a sentence, it's useless for our purposes now. We resolve this by setting the display property to inline-block. Inline Block is amazing, but it basically boils down to making the anchor tag act like an inline element with the ability to style it like a block element. You can read up more about the various display types here.

Finally, the line-height and text align properties make the text appear in the centre of the element.

The Results

I've uploaded the results here. On this version, I've added in a hover state and some fancy CSS3 Transitions to the code.

Demo

Have a mess around! Can you make it better? (Probably, last time I checked the Facebook colour scheme wasn't red and pink)