You already know exactly what this widget is for! Moreover, this is very useful for most website and blog owners. Maybe here we will not make much ado, let's just get to the point of making it.
The first step, we try to make the Css first. To make it easier for you all, you can just copy and paste the following Css code:
section {
position: absolute;
left: 50%;
top: 50%;
margin: -135px -180px;
width: 360px;
min-height: 270px;
font-size: 35px;
text-align: center;
}
a {
display: inline-block;
position: relative;
float: left;
width: 80px;
height: 80px;
margin: 5px;
}
article {
cursor: pointer;
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: #333;
box-shadow: 0 0 6px -2px #000, 0 0 45px -20px #000;
color: #fff;
line-height: 90px;
transform: perspective(300px) rotateY(0deg);
transition: transform 0.4s linear, background-color 0s linear 0.2s, color 0s linear 0.2s;
}
a:hover article {
transform: perspective(300px) rotateY(180deg);
color: #eee;
transition: transform 0.2s linear, background-color 0s linear 0.1s, color 0s linear 0.1s;
}
a:nth-child(1):hover article {
background-color: #3B5998;
}
a:nth-child(2):hover article {
background-color: #00ACED;
}
a:nth-child(3):hover article {
background-color: #2C4762;
}
a:nth-child(4):hover article {
background-color: #CB2027;
}
a:nth-child(5):hover article {
background-color: #1769FF;
}
a:nth-child(6):hover article {
background-color: #4183C4;
}
a:nth-child(7):hover article {
background-color: #3399CC;
}
a:nth-child(8):hover article {
background-color: #EA4C89;
}
a:nth-child(9):hover article {
background-color: #3F729B;
}
a:nth-child(10):hover article {
background-color: #FF0084;
}
a:nth-child(11):hover article {
background-color: #F26300;
}
a:nth-child(12):hover article {
background-color: #445566;
}
span {
transition: transform 0s linear 0.2s, text-shadow 0s linear 0.2s;
display: block;
-webkit-font-smoothing: subpixel-antialiased;
font-smoothing: antialiased;
}
a:hover span {
transition: transform 0s linear 0.1s, text-shadow 0s linear 0.1s;
transform: scale(-1, 1);
text-shadow: 0 0 50px rgba(255, 255, 255, 0.5);
}
body {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JhZGVhNiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjYjNkZWE2Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYmFkZWE2Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #badea6), color-stop(50%, #b3dea6), color-stop(100%, #badea6));
background: -moz-linear-gradient(left, #badea6, #b3dea6 50%, #badea6);
background: -webkit-linear-gradient(left, #badea6, #b3dea6 50%, #badea6);
background: linear-gradient(to right, #badea6, #b3dea6 50%, #badea6);
}
@font-face {
font-family: "SSSocial";
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/ss-social-regular.eot");
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/ss-social-regular.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/ss-social-regular.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/ss-social-regular.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/ss-social-regular.svg#SSSocialRegular") format("svg");
font-weight: normal;
font-style: normal;
}
/* This triggers a redraw in IE to Fix IE8's :before content rendering. */
html:hover [class^="ss-"] {
-ms-zoom: 1;
}
.ss-icon, .ss-icon.ss-social, .ss-icon.ss-social-circle,
[class^="ss-"]:before, [class*=" ss-"]:before,
[class^="ss-"][class*=" ss-social"]:before, [class*=" ss-"][class*=" ss-social"]:before,
[class^="ss-"].right:after, [class*=" ss-"].right:after,
[class^="ss-"][class*=" ss-social"].right:after, [class*=" ss-"][class*=" ss-social"].right:after {
font-family: "SSSocial";
font-style: normal;
font-weight: normal;
text-decoration: none;
text-rendering: optimizeLegibility;
white-space: nowrap;
-moz-font-feature-settings: "liga=1";
-moz-font-feature-settings: "liga";
-ms-font-feature-settings: "liga" 1;
-o-font-feature-settings: "liga";
font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
}
.ss-icon.ss-social-circle,
[class^="ss-"].ss-social-circle:before, [class*=" ss-"].ss-social-circle:before,
[class^="ss-"].ss-social-circle.right:after, [class*=" ss-"].ss-social-circle.right:after {
font-weight: bold;
}
[class^="ss-"].right:before,
[class*=" ss-"].right:before {
display: none;
content: '';
}
<section class="ss-icon">
<a href="#"><article><span>facebook</span></article></a>
<a href="#"><article><span>twitter</span></article></a>
<a href="#"><article><span>tumblr</span></article></a>
<a href="#"><article><span>pinterest</span></article></a>
<a href="#"><article><span>behance</span></article></a>
<a href="#"><article><span>github</span></article></a>
<a href="#"><article><span>linkedin</span></article></a>
<a href="#"><article><span>dribbble</span></article></a>
<a href="#"><article><span>instagram</span></article></a>
<a href="#"><article><span>flickr</span></article></a>
<a href="#"><article><span>blogger</span></article></a>
<a href="#"><article><span>vimeo</span></article></a>
</section>
The sample results from this tutorial. Please see first through this button:
Live Demo
If you have prepared the two files. The last step is, you see how it works. However, if there is a mistake you will most likely not follow the methods correctly. We have tested everything before we publish it.
We think that's enough for this tutorial, hopefully it's useful.