Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to add spining effect on social media buttons on mouse hover using css3?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 377
    Comment on it

    Hello Readers, this is a small blog on spinning effect on mouse hover on social icons in css3.   In this example , I have taken  five icons when we hover the mouse , that particular icon will spin. Here I have used  transition, which allowed me to change the values of transform property smoothly within a given time period. I have used font awesome icons for  facebook, twitter, Linkedin, Google+ and youtube. 

     

    Here is the HTML code to achieve this:

    <!DOCTYPE html>
    <html>
    <head>    
        
        <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    
    </head>
    
    <body>
        
        <div class="wrapper">
                
            <a href="#"><span class="hexa-button small spin"><i class="fa fa-facebook"></i></span></a>
            <a href="#"><span class="hexa-button small spin"><i class="fa fa-twitter"></i></span></a>
            <a href="#"><span class="hexa-button small spin"><i class="fa fa-google-plus"></i></span></a>
            <a href="#"><span class="hexa-button small spin"><i class="fa fa-youtube"></i></span></a>
            <a href="#"><span class="hexa-button small spin"><i class="fa fa-linkedin-square"></i></span></a>
            
        </div><!-- /.container -->
    </body>
    </html>

     

     

    Here is the CSS code:

    .wrapper{width:100%;text-align:center;}
    
    .hexa-button {
        display: inline-block;
        position:relative;
        text-align: center;
        z-index: 0;
    }
    
    .hexa-button:before,
    .hexa-button:after {
        position: absolute;
        content: "";  
        left: -1px;
        top: 0;
        z-index: -1;
    }
    
    
    .hexa-button:before {
        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        -o-transform: rotate(60deg);
        transform: rotate(60deg);
    }
    
    
    .hexa-button:after {
        -webkit-transform: rotate(-60deg);
        -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
        -o-transform: rotate(-60deg);
        transform: rotate(-60deg);
    }
    
    
    .hexa-button i {
        z-index: 9;
        -webkit-transition: all .25s ease;
           -moz-transition: all .25s ease;
            -ms-transition: all .25s ease;
             -o-transition: all .25s ease;
                transition: all .25s ease;
    }
    
    
    .hexa-button,
    .hexa-button:before,
    .hexa-button:after {
         box-sizing: border-box;
         -webkit-transition: all .25s ease;
           -moz-transition: all .25s ease;
            -ms-transition: all .25s ease;
             -o-transition: all .25s ease;
                transition: all .25s ease;
    }
    
    
    .small {
        line-height: 37px;
        font-size: 37px;
        margin: 18.5px 0px;     
    }
    
    
    .small ,
    .small:before ,
    .small:after {
        height: 37px;
        width: 64px;
    }
    
    
    .spin
     {
        -webkit-transition: -webkit-transform .25s  ease;
           -moz-transition: -moz-transform .25s  ease;
            -ms-transition: -ms-transform .25s  ease;
             -o-transition: -o-transform .25s  ease;
                transition: transform .25s  ease;
    }
    
    
    .spin:hover {
        -webkit-transform:rotate(360deg);
           -moz-transform:rotate(360deg);
            -ms-transform:rotate(360deg);
             -o-transform:rotate(360deg);
                transform:rotate(360deg);    
    }
    
    
    .hexa-button,
    .hexa-button:before,
    .hexa-button:after {
        background-color: #2c3e50;  
        border-left:1px solid #2c3e50;
        border-right:1px solid #2c3e50;
        color: #2ecc71;
    }
    
    .hexa-button:hover,
    .hexa-button:hover:before,
    .hexa-button:hover:after {
        background: transparent;  
        border-left:1px solid #2ecc71;
        border-right:1px solid #2ecc71;  
        color: #2ecc71;
    }

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: