Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje07-09-2011, 00:41 (UTC)    
Título del mensaje: Botones de Compartir Red Social


Hola amigos de PWG,
En esta ocasion les Traigo unos Botones en CSS3 sacado de sixrevisions.com. Los botones que usaremos, son los ultimos de la Imagen anterior.

Antes que nada les quiero mostrar la Vista Previa
Ver Vista Previa

Ahora comenzemos.

Para que funcionen estos Botones, debemos insertar el Css en Code Css sin Stylo Tags.

Cita:
/* Botones By BrianPwg */

.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; }


Una vez pegado, vamos a llamar al HTML. Antes que nada, les quiero decir que este codigo va ir donde queramos que aparescan los Botones .

Cita:
<div class="outset-colored">
<ul>
<li>
<a href="mailto:ansarob@gmail.com" title="My E-Mail" class="email">

<img src="http://demos.sixrevisions.com/0002_css3_social_media_buttons/demos/images/gmail_white.png" alt="gmail icon" />
<span class="site">E-Mail</span>
</a>
</li>
<li>
<a href="http://linkedin.com" title="My LinkedIn Page" class="linkedin">
<img src="http://demos.sixrevisions.com/0002_css3_social_media_buttons/demos/images/linkedin_white.png" alt="LinkedIn icon" />
<span class="site">LinkedIn</span>

</a>
</li>
<li>
<a href="http://facebook.com" title="My Facebook Page" class="facebook">
<img src="http://demos.sixrevisions.com/0002_css3_social_media_buttons/demos/images/facebook_white.png" alt="Facebook icon" />
<span class="site">Facebook</span>
</a>
</li>

<li>
<a href="http://twitter.com" title="My Twitter Page" class="twitter">
<img src="http://demos.sixrevisions.com/0002_css3_social_media_buttons/demos/images/twitter_white.png" alt="Twitter icon" />
<span class="site">Twitter</span>
</a>
</li>
<li>
<a href="http://flickr.com" title="My Flickr Page" class="flickr">

<img src="http://demos.sixrevisions.com/0002_css3_social_media_buttons/demos/images/flickr_white.png" alt="Flickr icon" />
<span class="site">Flickr</span>
</a>
</li>
</ul>
</div>


Una vez pegado los Codigos,nos tiene que Funcionar como se Muestra en la Imagen Arriba.
Ver Vista Previa

Saludos
BrianPwg


Ultima edición por brianpwg el Mie Nov 21, 2012 4:47 pm; editado 2 veces
Mensaje07-09-2011, 00:59 (UTC)    
Título del mensaje:

Muy bonitos y buenos Brian,gracias por el aporte.

Saludos
______________

Noticias Relevantes
Diablo III llegara el 15 de mayo
Se desvela Angry Birds Space
Call of Duty: Black Ops 2 podria anunciarse el 28
La portatil Neo Geo es oficial
Hemos activado nuestro foro... ¡ Entrar al foro !
Mensaje07-09-2011, 01:00 (UTC)    
Título del mensaje:

Noti-gamer : Gracias :D
Mensaje07-09-2011, 01:20 (UTC)    
Título del mensaje:

Hola,
muy buen aporte, muy lindos los botones, se agradece.
Mensaje07-09-2011, 02:32 (UTC)    
Título del mensaje:

nesbet escribió:
Hola,
muy buen aporte, muy lindos los botones, se agradece.

Muchas Gracias Nesbet :d
Mensaje01-02-2012, 15:54 (UTC)    
Título del mensaje:

Este tema ha sido promovido, ya que cumple las características para ello.

Información sobre promoción de temas a zonas dedicadas:
http://www.paginawebgratis.es/forum/viewtopic.php?t=66177
(Los diseños o artículos, serán movidos a la zona de selección, si el moderador así lo considera)

saludes,
Team-Soporte.
______________
Team-Soporte.
Moderador de PaginaWebGratis.es

www.team-soporte.es.tl | @jeremymolina
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group