Subscribe by Email

When it comes to attracting attention to yourself on the internet, nothing does a better job than share buttons. Whether its twitter or google plus, social media probably has a huge impact on your traffic. I set out to create an attention grabbing way to display buttons, and came up with this: a circle that expands revealing a bunch of share buttons on hover. Read on to learn out how to do it, and check out the demo!

Structure

To begin I created the HTML structure of the file, consisting of a lot of divs and share buttons. This will be the basis of our share button. The structure looks a bit like this:

Fill that up with buttons and you end up with something that looks like this. It’s also necessary to add some text inside a div called .text. This is so the user knows what this mysterious circle does, and to draw a little more attention in its direction.

Oh, and don’t forget to include all the necessary Javascript, either in a separate Javascript file or at the end of your document. If you want to use the buttons I’ve used above, just use this, otherwise you’ll have to figure it out yourself:

Adding Styles

I was pleasantly surprised that to accomplish this I only had to use transitions. Animations (especially since you have to add vendor prefixes) can take up a considerable amount of room in your stylesheet. To begin I styled the main button holder, adding a border and box shadow. On hover we want it to expand but keep the same center, so some position was required. The large border-radius is to ensure we get a circle. Some transitions were added to create a smooth zoom effect.

Now we want to edit the actual divs so they all look correct. First things first, lets move all the divs to the center and set their opacity to 0. Then when we hover over them we want their opacity to return to 1. I also added some styles to the text, just to center everything.

Next we just have to position all the buttons. This took a little trial and error, but it wasn’t too difficult. Since we set the actual button holder to position: relative; and the divs to position: absolute; we only need to edit the top and left properties. I also added some extra CSS for the Facebook button to remove the text.

Once you’ve done that, save everything and try it out! If you’re feeling lazy you can download below or check out the demo page for an actual look at it! Thanks for reading, and if you liked this little tutorial don’t forget to share. It really helps.