Clean Social Buttons css

Clean Social Buttons – Botones sociales simples con efecto css hover.

BY Michael Rossi


<div class="center">
 <div id="social-test">
 <div class="social">
 <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
 <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
 <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
 <a href="#"><i class="fa fa-vimeo" aria-hidden="true"></i></a>
 <a href="#"><i class="fa fa-behance" aria-hidden="true"></i></a>
 <a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
 <a href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
 <a href="#"><i class="fa fa-pied-piper" aria-hidden="true"></a></i>
 </div>
 </div>
</div>
CSS

.center{display:table;width:100%;height:100vh}
#social-test{display:table-cell;vertical-align:middle;text-align:center;font-size:30px}
#social-test h2{color:#fff;font-family:Futura,"Trebuchet MS",Arial,sans-serif;font-weight:100}
#social-test .social{padding-left:0}
#social-test a{color:#909090;list-style-type:none;display:inline-block;width:50px;height:50px;line-height:50px;padding:1%;border:1px solid rgba(167,146,129,.4);cursor:pointer;margin-left:10px;margin-bottom:20px;transition:ease .3s}
#social-test a:hover{color:#fff;border:1px solid #ccc}
.social:hover>a{opacity:.5}
.social:hover>a:hover{opacity:1}
¿Te gusto el post?
¡Compártelo!

☑ Puede que también te interese:

Share Button with Tooltip CSS
Social Share Button with CSS and HTML
Social Icons vision 3D HTML y CSS