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)