Botones CSS3 para Blogger (Exclusivos de Ayuda Bloggers)

Por Víctor Calderón Oyarce el domingo, abril 28, 2013

Ú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.

Inicio Contacto Multimedia Proyectos

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:

Inicio Contacto Multimedia Proyectos

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:

Inicio Contacto Multimedia Proyectos

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.zip 5.6mb Descargar

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/AVvXsEgfnNvXCo1EJ62Tl44I1vSjFPXC-awIpA5W3Y6-j0vbeWTxjbJhbTOk46ZphVVKLM0R9ZSkLQragQf7sxIcqv3VUFj8PqlSxRCN9lamflFLO5z-5pvr7fC9Eu4cRY1gL5oC-V177poSews/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.

Ir a la página principal Subir A favoritos