<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css" rel="stylesheet">
<title></title>
</head>
<body class="spinner-body">
<ul class="soc-list">
<li><a href="/"><i class="socicon-facebook"></i></a></li>
<li><a href="/"><i class="socicon-twitter"></i></a></li>
<li><a href="/"><i class="socicon-linkedin"></i></a></li>
<li><a href="/"><i class="socicon-instagram"></i></a></li>
</ul>
</body>
</html> @media all and (-webkit-min-device-pixel-ratio: 0) {
.soc-list {
display: table;
width: 100%;
}
}
.soc-list {
list-style: none;
padding: 0;
word-spacing: -0.36em;
text-align: center;
}
.soc-list li {
word-spacing: normal;
display: inline-block;
vertical-align: top;
padding: 0;
margin: 0 0 0 -26px;
width: 52px;
height: 52px;
}
.soc-list li:hover {
}
.soc-list li:nth-child(2n) {
margin-top: 26px;
}
.soc-list a {
color:#fff;
background: #e2e2e2;
position: relative;
display: block;
width: 34px;
height: 34px;
left:9px;
top:9px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
-ms-transition: -ms-transform .5s;
-o-transition: -o-transform .5s;
transition: transform .5s;
}
.soc-list a:hover {
background: #b29f87;
-webkit-transform: rotate(405deg);
-ms-transform: rotate(405deg);
transform: rotate(405deg);
}
.soc-list i {
font-size: 16px;
position: absolute;
top: 50%;
left: 50%;
margin: -8px 0 0 -8px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.