Html Code: Social Buttons with Hover Animation

The following code contains two sets of social networks buttons, each of which has a special animation on mpuse hover. In the first, the backgrounds of the icons are removed on hover mode and the social network icons are displayed colorful and larger. In the second series, when the buttons are hovered, in addition to a rotation of the background from square to a circle, its icon changes.

<!-- this script got from www.htmlbestcodes.com - Coded by: Krishna Eydat -->
<style>
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);

body {
    background-color: rgba(255, 0, 60, 0.05);
}

.social-container {
    width: 400px;
    margin: 27vh auto;
    text-align: center;
}

.social-icons {
    padding: 0;
    list-style: none;
    margin: 1em;
}

.social-icons li {
    display: inline-block;
    margin: 0.15em;
    position: relative;
    font-size: 1.2em;
}

.social-icons i {
    color: #fff;
    position: absolute;
    top: 21px;
    left: 21px;
    transition: all 265ms ease-out;
}

.social-icons a {
    display: inline-block;
}

.social-icons a:before {
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    content: " ";
    width: 60px;
    height: 60px;
    border-radius: 100%;
    display: block;
    background: linear-gradient(45deg, #ff003c, #c648c8);
    transition: all 265ms ease-out;
}

.social-icons a:hover:before {
    transform: scale(0);
    transition: all 265ms ease-in;
}

.social-icons a:hover i {
    transform: scale(2.2);
    -ms-transform: scale(2.2);
    -webkit-transform: scale(2.2);
    color: #ff003c;
    background: -webkit-linear-gradient(45deg, #ff003c, #c648c8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 265ms ease-in;
}

.social-icons a.social-square:before {
    background: linear-gradient(45deg, #7b00e0, #ae31d9);
    border-radius: 10%;
}

.social-icons a.social-square:hover:before {
    transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -webkit-transform: scale(-180deg);
    border-radius: 100%;
}

.social-icons a.social-square:hover i {
    transform: scale(1.6);
    -ms-transform: scale(1.6);
    -webkit-transform: scale(1.6);
    color: #fff;
    transform: scale(1.6);
    -webkit-text-fill-color: #fff;
}
</style>
<div class="social-container">
    <ul class="social-icons">
        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
        <li><a href="#"><i class="fa fa-codepen"></i></a></li>
    </ul>
    <ul class="social-icons">
      <li><a href="#" class="social-square"><i class="fa fa-facebook"></i></a></li>
      <li><a href="#" class="social-square"><i class="fa fa-dribbble"></i></a></li>
      <li><a href="#" class="social-square"><i class="fa fa-github"></i></a></li>
      <li><a href="#" class="social-square"><i class="fa fa-stack-overflow"></i></a></li>
    </ul>
</div><a target="_blank" href="https://www.htmlbestcodes.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">HTML Best Codes</a>

If you don't know how to use this code or need more information Click here!

Html Best Codes

Html Code: Social Buttons with Hover Animation

Links