Cómo poner Botones en los Enlaces de Navegación sin usar Imágenes (estilo YouTube)

Seguramente ya habrás notado el estilo característico de los botones que actualmente usa Google en el diseño de sus servicios, como Blogger, YouTube, Google+, entre otros, aunque no son idénticos en todos los casos, sí son muy similares.



Pues hace apenas unos días, veía en CSS tricks un artículo en donde decían cómo crear el estilo de botones que usa YouTube al fondo de la página, usando algunas propiedades de CSS3 como esquinas redondeadas, sombras, etc, y me gustó para usarlos en los enlaces de navegación, y crear los efectos que puedes ver en la siguiente imagen:

Ya antes habíamos hecho algo parecido, usando una sola imagen con un botón en 3D. Ahora, verás cómo poner botones sin usar ninguna imagen ;)

Demostración

Si esto se adapta al diseño de tu blog y te gusta, entonces veamos cómo hacerlo:



Paso 1. Ve a Plantilla > Personalizar > Avanzado > Añadir CSS, y en el campo, agrega el siguiente CSS, y guarda los cambios en "Aplicar al Blog":

/*Botones en los enlaces de Navegación*/

a.home-link, a.blog-pager-newer-link, a.blog-pager-older-link {

display:inline-block;

border:1px solid #DDD;

border-radius:3px;

text-shadow:0 1px 1px #fff;

text-decoration:none;

font: bold 11px Sans-Serif;

padding:6px 10px;

white-space:nowrap;

vertical-align:middle;

color: #666;

background: #F1F1F1;

}

a.home-link:hover, a.blog-pager-newer-link:hover, a.blog-pager-older-link:hover, a.home-link:focus, a.blog-pager-newer-link:focus, a.blog-pager-older-link:focus {

border-color: #999;

background: -webkit-linear-gradient(top, white, #E0E0E0);

background: -moz-linear-gradient(top, white, #E0E0E0);

background: -ms-linear-gradient(top, white, #E0E0E0);

background: -o-linear-gradient(top, white, #E0E0E0);

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;

-moz-box-shadow:0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;

box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;

}

a.home-link:active, a.blog-pager-newer-link:active, a.blog-pager-older-link:active {

border: 1px solid #AAA;

border-bottom-color: #CCC;

border-top-color: #999;

-webkit-box-shadow: inset 0 1px 2px #aaa;

-moz-box-shadow:inset 0 1px 2px #aaa;

box-shadow:inset 0 1px 2px #aaa;

background:-webkit-linear-gradient(top, #E6E6E6, gainsboro);

background:-moz-linear-gradient(top, #E6E6E6, gainsboro);

background:-ms-linear-gradient(top, #E6E6E6, gainsboro);

background:-o-linear-gradient(top, #E6E6E6, gainsboro);

}

Paso 2. Opcional. Ahora vamos a cambiar los textos de los enlaces, para que en lugar de "Entradas antiguas" diga "Anterior" y en lugar de "Entradas recientes" diga: "Siguiente", para ello, vas a la edición de HTML de la plantilla, marcas la casilla de expandir plantilla de artilugios y con la ayuda de ctrl F, buscas:



<b:includable id='nextprev'>   <div class='blog-pager' id='blog-pager'>

    <b:if cond='data:newerPageUrl'>

      <span id='blog-pager-newer-link'>

      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>

      </span>

    </b:if>

    <b:if cond='data:olderPageUrl'>

      <span id='blog-pager-older-link'>

      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>

      </span>

    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>



Luego cambias:



<data:newerPageTitle/>  por: Siguiente.

<data:olderPageTitle/>  por: Anterior.

<data:homeMsg/> por: Inicio (opcional), si no lo cambias el texto quedará igual:"Página Principal".







Nota: Si no deseas cambiar los textos de los enlaces, no lo hagas, igualmente funcionarán los botones ya que no tienen definido el ancho.





Paso 3. Verificas en vista previa y si todo luce bien, guardas los cambios.



Y ¡listo!, así de fácil y rápido.





Esto funciona bien en todos los navegadores modernos, en el caso de Internet Explorer 8 o versiones pasadas, (sí en IE9 excepto gradiente en el efecto hover) los efectos no se ven exactamente igual, ya que no soporta algunas propiedades de CSS3, sin embargo, si se ven los botones.