Botones de redes sociales estilo css3

Botones de redes sociales estilo css3

TUTORIALES BLOGGER tutoriales facebook

DanyTutos PRO

febrero 05, 2015

Botones de redes sociales estilo css3

En estos días es muy común adornar nuestro blogs de  cosas muyllamativos  interesantes . Es por eso que les comparto estos estupendos  "Botones de redes sociales estilo css3" para su blogs.

El visitantes dará clic en unos de los botones y se llevara una impresión que le sorprenderá  muchos.  Y como lo ponemos sigue estos es pasos a continuación.

- Primer paso . Busca en este codigo : ]]></b:skin>   y encima de ella lo pones  y lo guardas.

.social{
    max-width:300px;
}
 
.social li{
    min-height:40px;
    clear:both;
    float:none;
    margin-bottom:10px;
}
 
.social a{
    color:#232323;
    position:relative;
    display:block;
    line-height:40px;
    padding-left:55px;
}
 
.social span{
    display:block;
    width:40px;
    height:40px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPYn7RF9n64mvcpbMnactpPirN5hmh6JdDz7x19Q6k8WkpDIpQZy-HSzVtNC2TUuNI8Pu_FSQA60YxUbUNfioYWH2wAd5-tYnm8jAWFbUc45-ooQ7PQ-XZbiSG_xSya1pClzju6yzA/s1600/social.png) no-repeat;
    position:Absolute;
    left:0;
    border-radius:32px;
    box-shadow:0 2px 4px rgba(0,0,0,0.2);
}
 
.social .facebook{
    background-color:#2d309a;
}
 
.social .twitter{
    background-color:#00FFFF;
    background-position:0 -40px;
}
 
.social .pinterest{
    background-color:#FF0000;
    background-position:0 -80px;
}
 
.social .email{
    background-color:#00FF00;
    background-position:0 -120px;
}
 
.social .rss{
    background-color:#ffba16;
    background-position:0 -160px;
}
.social a{
    /*--code trư�c--*/
    z-index:1;
    -moz-transition:color 0.4s ease;
    -webkit-transition:color 0.4s ease;
    -o-transition:color 0.4s ease;
    transition:color 0.4s ease;
}
 
.social span{
    /*--code trư�c--*/
    z-index:-1;
    opacity:0.8;
    -moz-transition:opacity 0.4s ease,width 0.4s ease;
    -webkit-transition:opacity 0.4s ease,width 0.4s ease;
    -o-transition:opacity 0.4s ease,width 0.4s ease;
    transition:opacity 0.4s ease,width 0.4s ease;
}
 
.social a:hover{
    color:white;
    text-shadow:0 1px 0 rgba(0,0,0,0.5);
}
 
.social a:hover span{
    width:300px;
    opacity:1;
}

-El segundo pasos . Entras  a diseño y añades un gadget ..Osea lo pones donde quieras.

 <ul class="social">

    <li><a href="#" target="_blank"><span class="facebook icon"></span>Sigueme en Facebook</a>

    </li>
    <li><a href="#" target="_blank"><span class="twitter icon"></span>Sigueme en Twitter</a>

    </li>
    <li><a href="#" target="_blank"><span class="pinterest icon"></span>Sigueme en Pinterest</a>

    </li>
    <li><a href="#" target="_blank"><span class="email icon"></span>Contacto via Email</a>

    </li>
    <li><a href="#" target="_blank"><span class="rss icon"></span>Suscribete RSS Feed</a>

    </li>
</ul> 

Esta mas decir que pongas tu url de tus redes sociales.

MIra el Demo :  VER DEMO

Si te a gustado esto comparte a tus amigos  y actualizaciones via redes sociales.

Danos Tu Reaccion Sobre el Articulo

DanyTutos PRO