Para estos botones usé la herramienta Gradient Editor de Colorzilla, transiciones, la transformación 2D translate y box-shadow.
Código CSS:
Método de uso:
.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;
}
<a href="URL_DESTINO" class="glossy-ayudabloggers">Nombre del enlace</a>Flat:
Botones sencillos y planos, con transiciones. Útiles para plantillas simples:
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 enlacePuedes 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:
Código CSS:
Método de Uso:
.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);
}
Nombre del enlaceNota: 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.6mb
Código CSS:
Método de uso:
.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;
}
Para cambiar el ícono debes reemplazar zip-file por otro valor, pero antes debes crear las reglas CSS para cada tipo de archivo:
<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>
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.
Firebug es una completa herramienta para desarrolladores que permite editar cualquier elemento de una página, analizar su estructura, su hoja de estilos y sus scripts. Con esta herramienta puedes insertar atributos a tu blog sin necesidad de entrar a la Edición HTML, y así probar correcciones o bien hacer cambios para posteriormente añadir los atributos a tu plantilla.
Simple Pagerank, muestra de manera poco intrusiva el PR de un sitio web en la barra inferior del navegador, con ella podemos saber el nivel PageRank sin necesidad de recurrir a sitios externos.
Esta barra permite visualizar tanto el PageRank, como el Alexa Rank de un sitio web, es un poco intrusiva pero permite obtener en tiempo real las estadísticas de cualquier sitio web que visites.
WooRank es un sistema de informes que permite ayudarte a conseguir un buen posicionamiento en Google. Esta completa herramienta incluye las siguientes características:
Esta útil herramienta permite aumentar el ancho del editor de entradas de Blogger y así disponer al 100% de éste (Probado en el antiguo Blogger y en el nuevo).