Animated social media icon using CSS3.

Animated social media icon using CSS3.

This article we are creating animated social media icons. We have been using HTML, CSS. How we have inserted HTML, CSS, into our file. You can also change the icons colors & fonts according to your beautiful design. We can easily to modify. We can use more than more icon using fontawesome 4. This is a very useful module for all web player. Just copy and paste this simple code & ready your ripple effect button.

By using this plugin the design will look like this.

First of all you put Html in your file.

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="pro-text"> <h1>Animated Social Media Icon</h1> <h3>Font Awesome 4 Icon</h3> </div> <div class="pro-icons"> <ul> <li> <a href="#"> <i class="fa fa-facebook" aria-hidden="true"></i> </a> </li> <li> <a href="#"> <i class="fa fa-twitter" aria-hidden="true"></i> </a> </li> <li> <a href="#"> <i class="fa fa-linkedin" aria-hidden="true"></i> </a> </li> <li> <a href="#"> <i class="fa fa-instagram" aria-hidden="true"></i> </a> </li> </ul> </div> <div class="pro-btm">Designed By Papa Web Designer</div>

Then put Css in your file.

  



And Some css put in your css file.

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400');
body {
	margin: 0;
	padding: 0;
	background: #ccc;
	font-family: 'Roboto Condensed', sans-serif;
}
.pro-btm {
    text-align: center;
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 15px;
    text-align: right;
    font-size: 19px;
    color: #252525;
}
.pro-text {
    text-align: center;
    padding-top: 20px;
}
.pro-text h1 {
    margin: 0;
    font-size: 42px;
    letter-spacing: 0.5px;
}
.pro-text h3 {
    margin: 10px 0 0 0;
    font-weight: normal;
    font-size: 26px;
}
.pro-icons ul {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	margin: 0;
	padding: 0;
}
.pro-icons ul li {
	list-style: none;
	margin: 0 5px;
}
.pro-icons ul li a .fa {
    font-size: 27px;
    color: #262626;
    line-height: 60px;
    transition: .5s;
    padding-right: 0;
    width: 100%;
}
.pro-icons ul li a {
    text-decoration: none;
    margin: 0 10px;
    display: block;
    height: 60px;
    background: #fff;
    text-align: center;
    transition: .5s;
    position: relative;
    /*box-shadow: -20px 20px 10px rgba(0, 0, 0, .5);*/
    width: 55px;
}
.pro-icons ul li a:before {
    content: '';
    position: absolute;
    top: 4px;
    left: -8px;
    height: 100%;
    width: 8px;
    background: #b1b1b1;
    transform: rotate(0deg) skewY(-45deg);
}
.pro-icons ul li a:after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: -4px;
    height: 8px;
    width: 100%;
    background: #b1b1b1;
    transform: rotate(0deg) skewX(-45deg);
}
.pro-icons ul li a:hover {
    transform: rotate(0deg) skew(0deg) translate(5px, -5px);
    box-shadow: -52px 23px 50px rgba(0, 0, 0, .2);
}
.pro-icons ul li:hover .fa {
	color: #fff;
}
.pro-icons ul li:hover:nth-child(1) a {
	background: #3b5998;
}
.pro-icons ul li:hover:nth-child(1) a:before {
	background: #365492;
}
.pro-icons ul li:hover:nth-child(1) a:after {
	background: #4a69ad;
}
.pro-icons ul li:hover:nth-child(2) a {
	background: #00aced;
}
.pro-icons ul li:hover:nth-child(2) a:before {
	background: #097aa5;
}
.pro-icons ul li:hover:nth-child(2) a:after {
	background: #53b9e0;
}
.pro-icons ul li:hover:nth-child(3) a {
	background: #0077b5;
}
.pro-icons ul li:hover:nth-child(3) a:before {
    background: #06679a;
}
.pro-icons ul li:hover:nth-child(3) a:after {
    background: #0987ca;
}
.pro-icons ul li:hover:nth-child(4) a {
	background: #e4405f;
}
.pro-icons ul li:hover:nth-child(4) a:before {
	background: #d81c3f;
}
.pro-icons ul li:hover:nth-child(4) a:after {
	background: #e46880;
}

Finally we are completed animated social icons. First of all I want to tell you this, If you want to use more than icons you can do easily first you will have to go fontawesome & pick your icons or class and put your other button class name. Likewise you can use more than more social icons in your beautiful page.

We have given the best suitable and easiest How to use button ripple effects without JS?

Thanks for reading this article. we have Html & Html5, jquery, js, css question & answer & Angular6 also. For more designs solutions like this you simply visit our site’s post and pages. collection of amazing designing , development tricks and tips. Hope you like button ripple effect. for any query and suggestion please comment.

Leave a Reply

Your email address will not be published. Required fields are marked *