Iconos de frutas y vegetales Icons

Fruit and Vegetable Icons es un set gratuito de íconos en formas de frutas y vegetales, ideales para un blog o web sobre cocina.

CARACTERÍSTICAS

Pack de 9 íconos de frutas y vegetales.
Autor : bingxueling
Formato: PNG.
Tamaños: 256x256 px.

Descargar

Twitter Buttons Icons

Twitter Buttons Icons es un set gratuito de íconos de Twitter, muy elegantes, ideales para un sitio web o blog.

CARACTERÍSTICAS

Pack de 4 íconos Twitter con el pajarito característico.
Autor : Graphic Leftovers
Formato: PNG.
Tamaños: 128x128, 256x256 px.

Descargar

Somicro Social Icons

Somicro Social Icons es un set gratuito de íconos de redes sociales sencillos,pero muy elegantes en forma de círculos, ideales para un sitio web o blog.

CARACTERÍSTICAS

Pack de 40 íconos de las principales redes sociales: AddThis, App.net, Behance, Blogger, DeviantART, Digg, Dribbble, Email, Facebook, Flickr, Forrst, Foursquare, GitHub , Google+, Indiegogo, Instagram, Kickstarter, Last.fm, Linkedin, Livejournal, Messenger, MySpace, Orkut, Paypal, Picasa, Pinterest, Reddit, RSS, ShareThis, Skype, Soundcloud, Spotify, StackOverflow, StumbleUpon, Tumblr, Twitter, Vimeo, WordPress, Yelp, Youtube.
Autor : Veodesign
Formato: PNG.
Tamaño: 35x32 px.

Descargar

Pokemon Social Icons

Pokemon Social Icons es un set gratuito de íconos de redes sociales basados en este popular anime que puedes utilizar en su sitio web, blog o en algún proyecto.

CARACTERÍSTICAS

Pack de 5 íconos en forma de pokemones de las principales redes sociales: Squirtle Facebook, Pidgey Twitter, Chansey Dribbble, Bulbasaur Spotify y Charmander Instagram.
Autor : Jaws Martin
Formato: PNG.
Tamaños: 200x200 px.

Descargar

Bottle Social Icon Set

Bottle Social Icons es un set gratuito de íconos de redes sociales en forma de botellas.

CARACTERÍSTICAS

Pack de 42 íconos en forma de botellas de las principales redes sociales.
Autor : Apricum
Formato: PNG.
Tamaños: 126x256 px.

Descargar

Unos cuantos íconos especiales

Pictonic Icons

Contiene 266 íconos en formato PNG. descargar

PW Drawn Icon Font

Contiene un archivo en formato TTF. descargar

Vintage Social Icon Set

Vintage Social es un set de íconos de redes sociales estilo vintage que podemos usar en nuestro blog o sitio web.

CARACTERÍSTICAS

Pack de 28 íconos estilo vintage de las principales redes sociales.
Autor : Iconstoc
Formato: PNG.
Tamaños: 128x128.

Descargar

Botones CSS3 para Blogger (Exclusivos de Ayuda Bloggers)

Últimamente no he creado muchas cosas para sus blogs debido a la falta increíble de tiempo en la que me encuentro, así que para compensarlo he construído 4 tipos de botones para sus blogs, son libres de modificarlos a su antojo y distribuirlos.

Glossy:
Para estos botones usé la herramienta Gradient Editor de Colorzilla, transiciones, la transformación 2D translate y box-shadow.

InicioContactoMultimediaProyectos

Código CSS:

.glossy-ayudabloggers {
color:#fff;
margin:10px;
padding:13px 8px;
background: rgb(184,225,252);
background: -moz-linear-gradient(top, rgba(184,225,252,1) 0%, rgba(169,210,243,1) 10%, rgba(144,186,228,1) 25%, rgba(144,188,234,1) 37%, rgba(144,191,240,1) 50%, rgba(107,168,229,1) 51%, rgba(162,218,245,1) 83%, rgba(189,243,253,1) 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(184,225,252,1)), color-stop(10%,rgba(169,210,243,1)), color-stop(25%,rgba(144,186,228,1)), color-stop(37%,rgba(144,188,234,1)), color-stop(50%,rgba(144,191,240,1)), color-stop(51%,rgba(107,168,229,1)), color-stop(83%,rgba(162,218,245,1)), color-stop(100%,rgba(189,243,253,1)));
background: -webkit-linear-gradient(top, rgba(184,225,252,1) 0%,rgba(169,210,243,1) 10%,rgba(144,186,228,1) 25%,rgba(144,188,234,1) 37%,rgba(144,191,240,1) 50%,rgba(107,168,229,1) 51%,rgba(162,218,245,1) 83%,rgba(189,243,253,1) 100%); 
background: -o-linear-gradient(top, rgba(184,225,252,1) 0%,rgba(169,210,243,1) 10%,rgba(144,186,228,1) 25%,rgba(144,188,234,1) 37%,rgba(144,191,240,1) 50%,rgba(107,168,229,1) 51%,rgba(162,218,245,1) 83%,rgba(189,243,253,1) 100%);
background: -ms-linear-gradient(top, rgba(184,225,252,1) 0%,rgba(169,210,243,1) 10%,rgba(144,186,228,1) 25%,rgba(144,188,234,1) 37%,rgba(144,191,240,1) 50%,rgba(107,168,229,1) 51%,rgba(162,218,245,1) 83%,rgba(189,243,253,1) 100%);
background: linear-gradient(to bottom, rgba(184,225,252,1) 0%,rgba(169,210,243,1) 10%,rgba(144,186,228,1) 25%,rgba(144,188,234,1) 37%,rgba(144,191,240,1) 50%,rgba(107,168,229,1) 51%,rgba(162,218,245,1) 83%,rgba(189,243,253,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 );
box-shadow:0 3px 0 rgba(37,141,200,1);
border-radius:5px;
text-shadow:0 1px 0 rgba(37,141,200,0.5);
display:inline-block;
border:none;
cursor:pointer;
}

.glossy-ayudabloggers:hover {
box-shadow:0 5px 0 rgba(37,141,200,1), inset 0 0 30px rgba(255,255,255,0.2);
-webkit-transform: translate(0, -2px);
-moz-transform: translate(0, -2px);
-o-transform: translate(0, -2px);
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition:0.5s;
transition: 0.5s;
text-decoration: none;
}

.glossy-ayudabloggers:focus, .glossy-ayudabloggers:active {
box-shadow:inset 0 2px 0 rgba(37,141,200,1);
-webkit-transform: translate(0, 2px);
-moz-transform: translate(0, 2px);
-o-transform: translate(0, 2px);
-moz-transition: 0.1s;
-webkit-transition: 0.1s;
-o-transition:0.1s;
transition: 0.1s;
}

Método de uso:

<a href="URL_DESTINO" class="glossy-ayudabloggers">Nombre del enlace</a>

Flat:
Botones sencillos y planos, con transiciones. Útiles para plantillas simples:

InicioContactoMultimediaProyectos

InicioContactoMultimediaProyectos

InicioContactoMultimediaProyectos

Código CSS:

.flat-ayudabloggers {
background:#e74c3c;
margin:10px;
color:#FFF;
padding:15px 8px;
border-radius:5px;
text-shadow:none;
display:inline-block;
border:none;
cursor:pointer;
}

.flat-ayudabloggers:hover {
background:#c0392b;
text-decoration: none;
}

.concreto {background:#95a5a6;}
.concreto:hover {background:#7f8c8d;}

.turquesa {background:#1abc9c;}
.turquesa:hover {background:#16a085;}

Método de Uso:

Nombre del enlace

Puedes modificar el valor concreto por turquesa para cambiar el color, o si quieres dejarlo por defecto simplemente borra el valor.

Si deseas crear tus propias configuraciones de colores, puedes ir a ColorCombos y elegir una combinación de colores tanto para el botón normal, como para el :hover. Botones de Ayuda Bloggers:
Estos son los botones que una vez creé para mi blog, utilizan box-shadow, text-shadow y gradientes:

InicioContactoMultimediaProyectos

Código CSS:

.ayudabloggers-boton {
border: none;
margin:10px;
color: #fff;
display: inline-block;
font: 300 16px/31px "Open Sans","Helvetica Neue",Arial,sans-serif !important;
height: 32px;
background-color: #267cc2;
padding: 0 24px;
cursor:pointer;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,.25);
white-space: nowrap;
border-radius: 2px;
box-shadow: 0 2px 1px rgba(0,0,0,.19),inset 0 -1px 0 rgba(0,0,0,.19),inset 0 1px 0 0 rgba(255,255,255,.19);
background-color: #267cc2;
background-image: -webkit-gradient(linear,left bottom,left top,from( #42a5e1),to( #267cc2));
background-image: -webkit-linear-gradient( #42a5e1, #267cc2);
background-image: -moz-linear-gradient( #42a5e1, #267cc2);
background-image: -ms-linear-gradient( #42a5e1, #267cc2);
background-image: -o-linear-gradient( #42a5e1, #267cc2);
background-image: linear-gradient( #42a5e1, #267cc2);
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition:0.5s;
transition: 0.5s;
}

.ayudabloggers-boton:hover {
box-shadow: 0 4px 1px rgba(0,0,0,.19),inset 0 -3px 0 rgba(0,0,0,.19);
text-decoration: none;
}

.ayudabloggers-boton:active, .ayudabloggers-boton:focus {
box-shadow: inset 0 2px 0 0 rgba(0,0,0,.19),inset 0 12px 24px 6px rgba(0,0,0,.19),inset 0 0 2px 2px rgba(0,0,0,.19);
}

Método de Uso:

Nombre del enlace

Nota: Para la tipografía necesitas copiar el siguiente código arriba de </head>:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300italic,300,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css' />

Botón descarga CSS3:
Un botón único que creé para un amigo, según el tipo de archivo debes configurar la imagen.

photo_albums.zip5.6mbDescargar

Código CSS:

.ab-download {
display:inline-block;
font-family:Arial;
background:#FCFCFC;
text-align:center;
border:1px solid #dadada;
box-shadow:0 2px 1px #dadada;
margin:30px 40px;
padding:15px;
border-radius:10px;
min-width:100px;
}

.ab-icon {
display:block;
width:90px;
height:90px;
margin:0 auto;
}

.ab-name {
color:#222;
font-style:italic;
}

.ab-size {
display:block;
padding:10px;
font-size:11px;
color:#888;
}

.download-message {
display:block;
margin:0 -30px;
cursor:pointer;
background:rgba(6,127,124,1);
background:linear-gradient(rgb(39,185,182), rgba(6,127,124,1));
box-shadow:0 2px 0 rgb(6,127,124);
text-align:center;
padding:15px;
color:white;
font-weight:bold;
}

.download-message:hover {
box-shadow: 0 0 4px rgba(6,127,124,0.4);
}


/*Tipos de archivo*/
.zip-file {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAmiOFYwSMY0ZLd57mpF4MtES6BrtMSYPLeqn58_czMMwyoEKFA4gOVicID0zqaQqs8eG6z7M5qVN51pFLOh8Zy58gCIl2egPMJ9lpDVQttD3TFSj087XqTEYKLv5Oj-q62pVeTV7-Hfs/s1600/1367207826_zip.png) no-repeat center;
}

Método de uso:

<div class="ab-download">
<span class="ab-icon zip-file"></span>
<span class="ab-name">photo_albums.zip</span>
<span class="ab-size">5.6mb</span>
<a href="URL_DESTINO" class="download-message">Descargar</a>
</div>

Para cambiar el ícono debes reemplazar zip-file por otro valor, pero antes debes crear las reglas CSS para cada tipo de archivo:

Primero, copia el siguiente código y pégalo en la zona CSS de tu plantilla:

.extensión-file {
background:url(URL_DE_LA_IMAGEN) no-repeat center;
}

Deberás reemplazar extensión por la extensión del archivo que quieras añadir, quedando así:

.doc-file {
background:url(URL_DE_LA_IMAGEN_DE_UN_ARCHIVO_CON_EXTENSIÓN_DOC) no-repeat center;
}

Y añadir una imagen en donde indica el código.

Si deseas utilizar un pack de iconos, te recomiendo este, utiliza las imágenes en 80x80 píxeles.

Egg Social Icon Set

Egg Social es un set de íconos de redes sociales en forma de huevos de pascua que podemos usar para nuestro blog o sitio web.

CARACTERÍSTICAS

Pack de íconos en forma de huevo de pascua de las principales redes sociales.
Autor : Land of Web
Formato: PNG.
Tamaños: 512x512, 256x256, 128x128, 64x64.

Descargar

Batck, Free and Other icons

Batch Icons descargar

Free Glyphs descargar

Other Icons descargar

Retro Style Social Media Icon Set

Retro Style Social Media es un set de íconos de redes sociales estilo retro que podemos usar para nuestro blog o sitio web.

CARACTERÍSTICAS

Pack de 20 íconos estilo retro de las principales redes sociales.
Autor : Designbolts
Formato: PNG.
Tamaños: 256x256, 128x128, 56x56, 32x32.

Descargar

Smashing dutchicons y otros

Smashing dutchicons

Contiene 84 íconos de 30x30 y 60x60, en formato PNG. descargar

Medialoot Mini
	Contiene 10 íconos de 32x32, en formato PNG. descargar

Free Dark
	Contiene 12 íconos de 48x48, en formato PNG. descargar

Valentine Folders Icon Set

Valentine Folders es un set de íconos adecuados para utilizar en el Día de San Valentín, que está ya muy cerca.

CARACTERÍSTICAS

Pack de 77 íconos, indicados para usar en nuestra PC.
Autor : elsie432
Formato: PNG.
Tamaños: 128x128.

Descargar

Irish Icons

Irish Icons Pack
	Contiene 26 íconos de diferentes tamaños, en formato PNG. descargar

Vintage Social Media Stamps

Vintage Social Media Stamps
	Contiene 14 íconos de 256x256, en formato PNG. descargar

Wifun Icons

Wifun Icons
	Contiene 30 íconos de distintos tamaños, en formato PNG. descargar

Social Store Icon Set

Social Store Icon Set es una colección de íconos de redes sociales en forma de vistosas tiendas.

CARACTERÍSTICAS

Pack de 10 íconos de distintas redes sociales: facebook, twitter, flickr, last.fm, vimeo, youtube, deviantart, dribble, forrst y RSS.
Autor : dembsky
Formato: PNG, ICNS, ICO, iCONTAINER.
Tamaños: 512x512, 256x256, 128x128, 64x64.

Descargar

Free Holiday Social Icon Set

Free Holiday Social Icon Set es una colección de íconos de redes sociales con estilo navideño, especiales para estas fechas.

CARACTERÍSTICAS

Pack de 9 íconos de distintas redes sociales: facebook, diff, delicious, stumbleupon, RSS, flickr, youtubes, twitter y technorati.
Autor : mommy23monkeys
Formato: PNG.
Tamaños: 144x144.

Descargar

Social Media Icons

3D black and white
	Contiene 41 íconos de 32x32 y 48x48, en formato PNG. descargar

Yammy Social Media
	Contiene 30 íconos de 64x64 y 128x128, en formato PNG. descargar

Iconos para HTML y controles varios

Chalkwork HTML

Contiene cientos de íconos en diferentes formatos. descargar

MAS: Chalkwork CONTROLS