website making software

ANIMATED SOCIAL ICONS

I have added an email link icon to the right


HERE IS THE HTML CODE (DOWNLOAD THE SPRITE ICONS FROM THE FORUM)

Just delete any row from the html code below for the icons you dont need, and

change the https:// to your own link. You can leave the CSS code as it is

Thanks to http://bradsknutson.com

----------------------------------------------------------------------------------------------

<a href="https://twitter.com/mobirise?lang=en-gb" target="_blank"><div class="twitter-hover social-slide"> </div></a>

<a href="https://www.facebook.com/Mobirise/" target="_blank"><div class="facebook-hover social-slide"></div>

</a><a href="https://plus.google.com/+Mobirise" target="_blank"><div class="google-hover social-slide"></div>

</a><a href="https://uk.pinterest.com/mobirise/" target="_blank"><div class="pinterest-hover social-slide"></div>

</a><a href="https://www.linkedin.com/in/mobirise" target="_blank"><div class="linkedin-hover social-slide"></div>

</a><a href="http://mobirise.tumblr.com/" target="_blank"><div class="tumblr-hover social-slide"></div>

</a><a href="https://www.instagram.com/p/9SzxMNAxrg/" target="_blank"><div class="instagram-hover social-slide"></div>

</a><a href="https://twitter.com/mobirise?lang=en-gb" target="_blank"><div class="stumbleupon-hover social-slide"></div>

</a><a href="https://www.youtube.com/channel/UCt_tncVAetpK5JeM8L-8jyw" target="_blank"><div class="youtube-hover social-slide"></div>

----------------------------------------------------------------------------------------------

HERE IS THE CSS

Change the url to where you have uploaded your icons


.social-slide {

 height: 47px;

 width: 48px;

 margin: 10px;

 float: left;

 -webkit-transition: all ease 0.3s;

 -moz-transition: all ease 0.3s;

 -o-transition: all ease 0.3s;

 -ms-transition: all ease 0.3s;

 transition: all ease 0.3s;

}

.social-slide:hover {

 background-position: 0px -48px;

 box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);

}

.twitter-hover {

 background-image: url('http://www.stcdesigns.com/mobirise/mobirise_images/twitter-hover.png');

}

.facebook-hover {

 background-image: url('http://www.stcdesigns.com/mobirise/mobirise_images/facebook-hover.png');

}

.google-hover {

 background-image: url('http://www.stcdesigns.com/mobirise/mobirise_images/google-hover.png');

}

.pinterest-hover {

 background-image: url('http://www.stcdesigns.com/mobirise/mobirise_images/pinterest-hover.png');

}

.linkedin-hover {

 background-image: url('http://www.stcdesigns.com/mobirise/mobirise_images/linkedin-hover.png');

}

.tumblr-hover {

 background-image: url('http://www.stcdesigns.com/mobirise/mobirise_images/tumblr-hover.png');

}

.reddit-hover {

 background-image: url('http://www.stcdesigns.com/mobirise/mobirise_images/rss-hover.png');

}

.instagram-hover {

 background-image: url('http://www.stcdesigns.com/mobirise/mobirise_images/instagram-hover.png');

}

.stumbleupon-hover {

 background-image: url('http://www.stcdesigns.com/mobirise/mobirise_images/stumbleupon-hover.png');

}

.youtube-hover {

 background-image: url('http://www.stcdesigns.com/mobirise/mobirise_images/youtube-hover.png');

}