Engage audiences with smart animated icons

Introduce simple techniques to get your visitors using social media


Introduce simple techniques to get your visitors using social media


Social causes don’t come much bigger than saving the planet and that is the subject of the latest documentary from Oscar-winning director Charles Ferguson, who addresses the subject of climate change.
The documentary aims to show the impact of climate change and the power of solutions that are already available. It explores the villains and heroes who are aiming to revolutionise the way we consume power and how we can all take action to make a difference.

A film undertaking such a worthy cause needs a site that focuses the user’s attention on taking action and impacting them to see the film and get involved. New York agency Ronik Design are responsible for the design of the website that accompanies the film. A small team worked on the site and footage was taken from the film. This was used as the main point of focus for the site’s visuals.

Overlaid with the film clips running in the background is a crisp site design that is clearly visible no matter what background footage is playing. Add to this the zippy animation of the social sharing icons and you have a well-packaged site that focuses the user on the worthy cause and not just the film.


1. Social skills

On the website there is a fantastic animated social sharing button. To re-create this, add the code content for this step from FileSilo to the body tags on your HTML page. This adds the structure for the content with three social buttons.

2. Work the CSS

In the head section, create style tags and the following code to make the background a slate grey. Everything in this animation is going to be created with CSS.

body {
background: #647c91;
font-family: helvetica, arial, sans-serif;

3. Hide the overflow

The key to making this animation work is to hide the overflow content, which will be three social buttons off the bottom of the container. As the user moves their mouse over it, that part will slide up and become visible while the text slides off the top.

#container {
width: 152px;
float: right;
border: 1px #fff solid;
height: 50px;
overflow: hidden;

4. Create the hover

This code powers the sliding effect for the social buttons. As the user puts their mouse over it, the ‘share’ text that is centred on the screen will slide upwards by performing a CSS3 transform on the y axis. Notice this is done with a very short 0.2 second timeframe. {
text-align: center;
transition: all 0.2s, transform 0.2s ease;
.social:hover {
transform: translateY(-59%);

5. Text format

The main text on the button is styled up here and it is made into a block element rather than an inline element, this ensures it takes up the full width of the parent element. The text is set to white and the padding set so that it sits within the height of the

.social p {
display: block;
color: #fff;
padding: 2px 0;

6. Social icons

The final section of code handles the rollover images for the social icons. Here we’ve just used the Facebook logo to shorten the code, but it can easily be re-created with other icons as well. Each icon is given a different background image with a transition to make the switch much smoother.

.social a {
display: inline-block;
width: 47.5px;
background: url(img/fb.png);
height: 50px;
transition: all 0.2s ease;
.social a:hover {
background: url(img/fb-over.png);