Demo for Social Buttons with Color Effect Code

Preview

Source Code

                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
body {
    margin: 0;
    overflow: hidden;
}
.socialWrapper {
    display: block;
    text-align: center;
    height: 100vh;
    padding-top: 15%;
    color: #fff;
    letter-spacing: 2px;
    font-family: "Bangers", cursive;
    text-shadow: 1px 1px #222;
    background: #7b1fa2;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.socialWrapper h1 {
    font-size: 48px;
}
ul.social {
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}
.social li {
    float: left;
}
.social li a {
    color: #e2e2e2;
    margin-right: 10px;
}
.hide {
    display: none;
}
.socialActive1 {
    background: #3b5998;
}
.socialActive2 {
    background: #00aced;
}
.socialActive4 {
    background: #222222;
}
.socialActive5 {
    background: #0077b5;
}
.socialActive3 {
    background: #d34836;
}
.socialWrapper .default {
    display: block;
}
.socialWrapper.socialActive1 .default,
.socialWrapper.socialActive2 .default,
.socialWrapper.socialActive3 .default,
.socialWrapper.socialActive4 .default,
.socialWrapper.socialActive5 .default {
    display: none;
}
.socialWrapper.socialActive1 .head1,
.socialWrapper.socialActive2 .head2,
.socialWrapper.socialActive3 .head3,
.socialWrapper.socialActive4 .head4,
.socialWrapper.socialActive5 .head5 {
    display: block;
}
</style>

</head>
<body>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Bangers'>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://use.fontawesome.com/cece742d74.js'></script>
<div class="socialWrapper">
    <h1>
        <span class="hide default">get social</span>
        <span class="hide head1">facebook</span>
        <span class="hide head2">twitter</span>
        <span class="hide head3">instagram</span>
        <span class="hide head4">github</span>
        <span class="hide head5">linkedin</span>
    </h1>
    <ul class="social">
        <li><a href="#"><i class="fa fa-facebook-square fa-3x"></i></a></li>
        <li><a href="#"><i class="fa fa-twitter-square fa-3x"></i></a></li>
        <li><a href="#"><i class="fa fa-instagram fa-3x"></i></a></li>
        <li><a href="#"><i class="fa fa-github-square fa-3x"></i></a></li>
        <li><a href="#"><i class="fa fa-linkedin-square fa-3x"></i></a></li>
    </ul>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
$(".social li a").each(function (i) {
    $(this).hover(function () {
        $(".socialWrapper").toggleClass("socialActive" + (i + 1));
    });
});
</script>

</body>
</html>

Other Codes

HTML Dynamic Business Card with Social Icons

The social buttons in this code are located on a person's ID card. By moving the mouse, this card also moves a little in three-dimensional space.

Expanding Social Buttons Code at Page Bottom

There is a blue button at the bottom of the page and there is a plus icon on this button. By clicking on this button, the social buttons will be displayed . . .

HTML Social Network Icons In 3D Wheel

In this code you have a 3D scroll bar that you can use to display your social media icon. You can use it by scrolling in this section. There is also a . . .

Social Icons with Auto Drawing Effect

When the screen loads, first the animation icons are drawn and then the icons become white. Also, each icon is displayed slightly larger during the hover.