<div class="social">
<a href="#" title="Like Us">
<svg class="facebook" x="0px" y="0px" viewBox="0 0 155.139 155.139" style="enable-background:new 0 0 155.139 155.139;">
<g>
<path d="M89.584,155.139V84.378h23.742l3.562-27.585H89.584V39.184 c0-7.984,2.208-13.425,13.67-13.425l14.595-0.006V1.08C115.325,0.752,106.661,0,96.577,0C75.52,0,61.104,12.853,61.104,36.452 v20.341H37.29v27.585h23.814v70.761H89.584z" />
</g>
</svg>
</a>
<a href="#" title="Like Us">
<svg class="facebook" x="0px" y="0px" viewBox="0 0 155.139 155.139" style="enable-background:new 0 0 155.139 155.139;">
<g>
<path d="M89.584,155.139V84.378h23.742l3.562-27.585H89.584V39.184 c0-7.984,2.208-13.425,13.67-13.425l14.595-0.006V1.08C115.325,0.752,106.661,0,96.577,0C75.52,0,61.104,12.853,61.104,36.452 v20.341H37.29v27.585h23.814v70.761H89.584z" />
</g>
</svg>
</a>
<a href="#" title="Like Us">
<svg class="facebook" x="0px" y="0px" viewBox="0 0 155.139 155.139" style="enable-background:new 0 0 155.139 155.139;">
<g>
<path d="M89.584,155.139V84.378h23.742l3.562-27.585H89.584V39.184 c0-7.984,2.208-13.425,13.67-13.425l14.595-0.006V1.08C115.325,0.752,106.661,0,96.577,0C75.52,0,61.104,12.853,61.104,36.452 v20.341H37.29v27.585h23.814v70.761H89.584z" />
</g>
</svg>
</a>
</div>
.social {
display:inline-block; /*shrinkwrap to child widths*/
margin:2em;
text-align:center;/*center the anchors*/
outline:1px solid red; /*visual testing*/
}
.social a {
display:inline-block;
vertical-align:bottom;
margin:.25em .5em;
text-decoration: none;
outline:1px solid red;/*visual testing*/
}
.social a img,
.social a svg {display:block;}
.social a .facebook {
width:3.2em;
height:auto;
padding:.25em;
border-radius: 50%;
fill: #45abff;
background:#0e1a25;
transition: background 0.5s, transform 0.5s ease-out, fill 0.5s;
}
.social a:hover .facebook {
fill: #0e1a25;
background:#45abff;
transform:scale(1.5);
transition:background 0.5s, transform 0.5s ease-out, fill 0.5s;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.