Gadget:Simple Media Buttons con CSS3

Las redes sociales tienen controlada la internet, además de que son sitios donde la gente confia su privasidad y estado tambien son utiles para compartir y mantenerse al tanto de las noticias.
Por eso ahora los sitios usan botones de esas redes para que las personas puedan compartir su contenido con sus amigos y seguidores en las redes sociales.

Todo avanza incluso la manera de diseñar en internet con el lenguage HTML5 y CSS3 que están controlando los diseños del momento.

Ve a Plantilla, has click en Edicion de HTML
Luego has click en Expandir plantilla de artilugios y buscas la etiqueta ]]></b:skin> y encima de ella pegas cualquiera de los siguientes dos codigos..
PRIMER ESTILO "ESTILO GRAY".

.inset {
   font-family: Helvetica, Verdana, Arial, sans-serif;
   font-size: 14px;
   list-style-type: none;
   margin: 10px 0 0 10px;
}

.inset ul { list-style-type: none; display: block; }

.inset li {
   float: left;
   height: 30px;
   margin: 0 8px 7px 0;
}

.inset li a {
   background-color: gray;
   color: #424242;
   float: left;
   font-size: 16px;
   font-weight: bold;
   height: 24px;
   padding-left: 27px;
   padding-top: 6px;
   position: relative;
   text-decoration: none;
   border: 1px solid #bfc1c6;
    /* Mozilla browsers that use Gecko layout engine */
   -moz-border-radius: 5px;
   /* Safari and Chrome that use WebKit layout engine */
   -webkit-borer-radius: 5px;
   /* W3C CSS Level 3.0 specifications. For Opera and IE9 */
   border-radius: 5px;
   /* Mozilla browsers that use Gecko layout engine */
background: -moz-linear-gradient(#a5a7aa, #bec1c5 1%, #d8dbdf 10%, #d8dbdf);
/* Safari and Chrome that use WebKit layout engine */
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #a5a7aa),color-stop(.01, #bec1c5),color-stop(.10, #d8dbdf),color-stop(1, #d8dbdf));
}

.inset li a:hover {
   border: 1px solid #b4b7bb;
   background: -moz-linear-gradient(#9c9fa2, #b4b7bb 1%, #cdd0d5 10%, #cdd0d5);
   background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #9c9fa2),color-stop(.01, #b4b7bb),color-stop(.10, #cdd0d5),color-stop(1, #cdd0d5));
}

.inset li a img {
   height: 16px;
   left: 7px;
   margin-right: 7px;
   position: absolute;
   top: 7px;
   width: 16px;
   border:none;
}

.inset li a span {
   display: block;
   height: 22px;
   padding-right: 7px;
   overflow: hidden;
   /* width: 70px; Uncomment this to add a fixed width */
}

span.site { font-size: 14px; line-height: 20px; }

SEGUNDO ESTILO "ESTILO COLOR".

.outset-colored {
    font-family: Helvetica, Verdana, Arial, sans-serif;
    font-size: 14px;
    list-style-type: none;
    margin: 10px 0 0 10px;
}

.outset-colored ul { list-style-type: none; display: block; }

.outset-colored li {
    float: left;
    height: 30px;
    margin: 0 8px 7px 0;
}

.outset-colored li a {
    color: #424242;
    float: left;
    font-size: 16px;
    font-weight: bold;
    height: 24px;
    padding-left: 27px;
    padding-top: 6px;
    position: relative;
    text-decoration: none;
    border: 1px solid #bfc1c6;
    border-radius: 5px;
    background-color: #D8D9DD;
    -moz-border-radius: 5px;
    -webkit-borer-radius: 5px;
}

/* EMAIL */
.outset-colored li a.email {
    background: -moz-linear-gradient(#ff6666, #cc0000 10%, #c40202);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff6666),color-stop(.10, #cc0000),color-stop(1, #c40202));
    color: #f3f3f3;
    border: 1px solid #c40202;
}

.outset-colored li a:hover.email {
    background: -moz-linear-gradient(#c40202, #cc0000 1%, #e03434 10%, #e03434);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c40202),color-stop(.01, #cc0000),color-stop(.10, #e03434),color-stop(1, #e03434));
}

/* LINKEDIN */
.outset-colored li a.linkedin {
    background: -moz-linear-gradient(#7cd0fb, #38a5dc 10%, #2c83ae);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7cd0fb),color-stop(.10, #38a5dc),color-stop(1, #2c83ae));
    color: #f3f3f3;
    border: 1px solid #2c83ae;
}

.outset-colored li a:hover.linkedin {
    background: -moz-linear-gradient(#2c83ae, #38a5dc 1%, #41b9f6 10%, #41b9f6);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2c83ae),color-stop(.01, #38a5dc),color-stop(.10, #41b9f6),color-stop(1, #41b9f6));
}

/* FACEBOOK */
.outset-colored li a.facebook {
    background: -moz-linear-gradient(#7aa3f7, #4c72c3 10%, #3b5998);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7aa3f7),color-stop(.10, #4c72c3),color-stop(1, #3b5998));
    color: #f3f3f3;
    border: 1px solid #3b5998;
}

.outset-colored li a:hover.facebook {
    background: -moz-linear-gradient(#3b5998, #4c72c3 1%, #5c8aea 10%, #5c8aea);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #3b5998),color-stop(.01, #4c72c3),color-stop(.10, #5c8aea),color-stop(1, #5c8aea));
}

/* TWITTER */
.outset-colored li a.twitter {
    background: -moz-linear-gradient(#8ae0fd, #24bce6 10%, #1e9ec1);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #8ae0fd),color-stop(.10, #24bce6),color-stop(1, #1e9ec1));
    color: #f3f3f3;
    border: 1px solid #1e9ec1;
}

.outset-colored li a:hover.twitter {
    background: -moz-linear-gradient(#1e9ec1, #24bce6 1%, #33ccff 10%, #33ccff);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #24bce6),color-stop(.01, #33ccff),color-stop(.10, #33ccff),color-stop(1, #33ccff));
}

/* FLICKR */
.outset-colored li a.flickr {
    background: -moz-linear-gradient(#fc75ba, #e10374 10%, #c10263);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fc75ba),color-stop(.10, #e10374),color-stop(1, #c10263));
    color: #f3f3f3;
    border: 1px solid #c10263;
}

.outset-colored li a:hover.flickr {
    background: -moz-linear-gradient(#c10263, #e10374 1%, #ff0283 10%, #ff0283);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c10263),color-stop(.01, #e10374),color-stop(.10, #ff0283),color-stop(1, #ff0283));
}

.outset-colored li a img {
    height: 16px;
    left: 7px;
    margin-right: 7px;
    position: absolute;
    top: 7px;
    width: 16px;
   border: none;
}

.outset-colored li a span {
    display: block;
    height: 22px;
    padding-right: 7px;
    overflow: hidden;
    /*width: 70px; Add a width here if you want all the buttons to be the same size.*/
}

span.site { font-size: 14px; line-height: 20px; }

Y guardas cambios.
Ahora el codigo de insercion de los botones es simple y tu puedes elegir donde ponerlos y que enlaces agregarles.
PRIMER ESTILO "ESTILO GRAY"

<div class="inset">
<ul>

<li>
<a href="#">
<img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/gmail_16.png" alt="gmail icon" />
E-Mail</a>

</li>

<li>
<a href="http://linkedin.com" title="My LinkedIn Page">
<img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/linkedin_16.png" alt="LinkedIn icon" />
LinkedIn
</a>

</li>

<li>
<a href="http://facebook.com" title="My Facebook Page">
<img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/facebook_16.png" alt="Facebook icon" />
Facebook
</a>

</li>

<li>
<a href="http://twitter.com" title="My Twitter Page">
<img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/twitter_16.png" alt="Twitter icon" />
Twitter
</a>

</li>

<li>
<a href="http://flickr.com" title="My Flickr Page">
<img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/flickr_16.png" alt="Flickr icon" />
Flickr
</a>

</li>

</ul>
</div>

SEGUNDO ESTILO "ESTILO COLOR"

<div class="outset-colored">
<ul>

<li>
<a href="http://mail.google.com" class="email">
<img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/gmail_white.png" alt="gmail icon" />
E-Mail</a>

</li>

<li>
<a href="http://linkedin.com" title="My LinkedIn Page" class="linkedin">
<img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/linkedin_white.png" alt="LinkedIn icon" />
LinkedIn
</a>

</li>

<li>
<a href="http://facebook.com" title="My Facebook Page" class="facebook">
<img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/facebook_white.png" alt="Facebook icon" />
Facebook
</a>

</li>

<li>
<a href="http://twitter.com" title="My Twitter Page" class="twitter">
<img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/twitter_white.png" alt="Twitter icon" />
Twitter
</a>

</li>

<li>
<a href="http://flickr.com" title="My Flickr Page" class="flickr">
<img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/flickr_white.png" alt="Flickr icon" />
Flickr
</a>

</li>

</ul>
</div>

Lo que aparece de color verde son los enlaces de las imagenes.
Lo que aparece de color azul es donde pondrás el enlace del boton (cada enlace dice de que pagina es el boton).
lo aparece de color naranja es donde dice el titulo del boton.
Lo que aparece de color rojo es el nombre del boton, el cual cada uno tiene el nombre de a que red social pertenece.
Lo que aparece de <li> a </li> es un boton.
Para añadir uno que has diseñado para otra red agregalo antes de </ul>.
cuando hallas termanado une todas etiquetas dejando el codigo así

<div class="outset-colored" style='margin-left:-5px;'><ul><li><a href="http://mail.google.com" class="email"><img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/gmail_white.png" alt="gmail icon" />E-Mail</a></li><li><a href="http://linkedin.com" title="My LinkedIn Page" class="linkedin"><img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/linkedin_white.png" alt="LinkedIn icon" />LinkedIn</a></li><li><a href="http://facebook.com/futudownloads" title="My Facebook Page" class="facebook"><img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/facebook_white.png" alt="Facebook icon" />Facebook</a></li><li><a href="http://twitter.com/iho_jose" title="My Twitter Page" class="twitter"><img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/twitter_white.png" alt="Twitter icon" />Twitter</a></li><li><a href="http://flickr.com" title="My Flickr Page" class="flickr"><img src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/simple-demo/flickr_white.png" alt="Flickr icon" />Flickr</a></li></ul></div>

Los resultados serán los siguientes:
PRIMER ESTILO "ESTILO GRAY".

SEGUNGO ESTILO "ESTILO COLOR"

Fuente | Sixrevisions.com

FUTUdownloads

Buscar este blog

Gadget:Simple Media Buttons con CSS3