Social Buttons with Hover Animation

Written by @kerixa 27 March 2021

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.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<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'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300