Sinceramente nunca le había prestado demasiada atención a esa barra, por la que me puse a investigar un poco mas sobre su comportamiento y como funciona. Después de mirar un poco pude recrear el efecto sin demasiadas complicaciones con un poco de CSS y jQuery.

Surgieron dos alternativas, la replica exacta (solo me tome el trabajo de explicar el código) de Mashable y otro un poco mas simple.

Si entramos a cualquier post en Mashable, veremos que la barra se acompaña al Scroll sin animaciones. Al usar valores negativos en el margin, esta barra no es visible en resoluciones menores (1024), por lo cual mediante jQuery se transforma en otra barra horizontal para mostrar el contenido; lo mismo sucede si redimencionamos la ventana.

La alternativa mas simple ofrece las mismas funcionalidades y un efecto en el scroll, pero si te excedes en el viewport, los visitantes que tengan una resolución de pantalla menor, no podrán apreciarla. A que me refiero con el exceso en el viewport? Simple, si tu container es de 960px de ancho y posicionamos la barra a unos -80px, nos excedimos en el viewport (960px + 80px = 1040) para resoluciones menores o iguales a 1024×768; ya que el safe area para esta resolución es de 975px de ancho.

Cualquiera de las dos alternativas es válida y funcional, queda en vos utilizar la que creas que mejor se adapte.

Replica de Mashable

Esta opción requiere un poco mas de código dada la complejidad. Al utilizar la posición fixed, esta opción no sera compatible con IE6 ya que este navegador desconoce esta propiedad.

Demo Replica de Mashable

No te olvides de redimensionar la ventana para apreciar el efecto completo

HTML

Como lo podemos apreciar en Mashable tenemos botones para sindicar contenido en Twitter, Google Buzz, Facebook y otras. Cada botón funciona por medio de un script para que les sea mas sencillo de integrar, podes usar e incluir los botones que necesitas por medio de algún plugin o simple código, eso queda en vos.

			<div id="social_bar">
				<div class="botones_grandes">
					<div class="gbuzz s_boton">
						<script type="text/javascript" src="http://button.njuice.com/buzz.js">
</script>
					</div>
					<div class="tweetmeme s_boton">
						<script type="text/javascript">
//<![CDATA[
tweetmeme_source = 'baires'; // Mi usuario en Twitter //
tweetmeme_url = '<?php the_permalink(); ?>'; // URL a socializar en este caso para Wordpress //
//]]>
</script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
</script>
					</div>
					<div class="faceboook s_boton">
						<script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript">
</script>
					</div>
				</div>
				<div class="botones_chicos">
					<div class="s_boton_small gbuzz_small">
						<script type="text/javascript">
//<![CDATA[
var njuice_buzz_size = 'small';
//]]>
</script> <script type="text/javascript" src="http://button.njuice.com/buzz.js">
</script>
					</div>
					<div class="s_boton_small twwetmeme_small">
						<script type="text/javascript">
//<![CDATA[
tweetmeme_style = 'compact';
//]]>
</script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
</script>
					</div>
					<div class="s_boton_small facebook_small">
						<script type="text/javascript">
//<![CDATA[
var fbShare = {
size: 'small',
}
//]]>
</script> <script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript">
</script>
					</div>
					<div class="s_boton_small">
						<a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=EliseosNet&amp;loc=es_ES" id="s_email" class="social_sprites" name="s_email">email</a>
					</div>
					<div class="s_boton_small">
						<a class="a2a_dd social_sprites" id="s_share" href="http://www.addtoany.com/share_save?linkname=Eliseos%20Net&amp;linkurl=eliseos.net" name="s_sharethis">Share</a><script type="text/javascript">
//<![CDATA[
a2a_linkname="My Sitio";a2a_linkurl="mi-url.com";
//]]>
</script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js">
</script>
					</div>
				</div>
				<div class="s_boton">
					<a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=EliseosNet&amp;loc=es_ES" id="s_email" class="social_sprites" name="s_email">email</a>
				</div>
				<div class="s_boton">
					<a class="a2a_dd social_sprites" id="s_share" href="http://www.addtoany.com/share_save?linkname=My%20Sitio&amp;linkurl=mi-url.com" name="s_sharethis">Share</a><script type="text/javascript">
//<![CDATA[
a2a_linkname="My Sitio";a2a_linkurl="mi-url.com";
//]]>
</script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js">
</script>
				</div>
			</div>

Nuestro markup es de lo mas sencillo, como se puede hay dos clases de botones: grandes y chicos. Los botones grandes son los que se aprecian a simple vista, los chicos se encuentran escondidos para las resoluciones inferiores o en caso de redimensioanarse la pantalla. Es necesario que edites los datos de cada botón para que coincida con los tuyos, en URL, Nombre del Sitio, etc.

Recomiendo introducir la barra justo después del titulo y antes del contendido para poder desplazarnos sin problemas. Para el caso de Wordpress dentro del archivo single.php

CSS

Esto es parte de la magia, otra vez es algo extremadamente simple de entender. Intente comentar lo mas posible el código para que sea de fácil entendimiento.

 
#social_bar {
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #DDDDDD;
float:left;
margin-left:-80px; /* // La distacia de la barra que queremos tener en relacion al post */
margin-right:10px;
position:relative;
}
 
/* // Formato de los Botones grandes */
.s_boton {
padding:5px;
clear:left;
margin:0;
}
 
/* // Formato de los Botones chicos */
.s_boton_small{
clear:none;
float:left;
padding:5px;
}
 
/* // Ocultamos los botones chicos de momento */
.botones_chicos{display:none;}
 
/* //Iconos para los links de Share y Email */
#social_bar a#s_email.social_sprites {
background-position:2px -32px;
text-decoration: none;
}
 
#social_bar a:hover#s_email.social_sprites {
background-position:2px -50px;
color:#4c545b;
text-decoration: none;
}
 
#social_bar a#s_share.social_sprites {
background-position:0px 4px;
text-decoration: none;
}
 
#social_bar a:hover#s_share.social_sprites {
background-position:0px -14px;
color:#4c545b;
text-decoration: none;
}
 
#social_bar a.social_sprites {
-moz-border-radius:3px 3px 3px 3px;
background:url(../images/social_sprites.png) no-repeat scroll 0 0 #FFFFFF;
border:1px solid #E8E8E8;
color:#989898;
display:block;
font:9px/1.625 verdana,sans-serif;
margin:0;
padding:2px;
text-align:right;
width:44px;
}

En caso que lo necesites esta es la imagen que utilice en los links de share & e-mail. Los iconos pertenecen al set Glyphish.

jQuery

Y aquí viene la magia que hará que el comportamiento de la barra acompañe al scroll y diferencie las distintas resoluciones de pantalla.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

$(function(){	
 
    if( $('#social_bar').length > 0 && !($.browser.msie && parseInt($.browser.version) < 7) ) {
        var descripY = parseInt($('.main').offset().top) - 20;
        var $postShare = $('#social_bar');
        var pullX = $postShare.css('margin-left');
 
        $(window).data('scrollBound', false);
 
        function positionShareScroll() {
            var scrollY = $(window).scrollTop();
            var fixedShare = $postShare.css('position') == 'fixed';
            if ( scrollY > descripY && !fixedShare ) {
                $postShare.stop().css({
                    position: 'fixed',
                    left: '50%',
                    top: 20,
                    marginLeft: -540 // Este valor se debe ajustar ya que depende de cada diseño//
                });
            } else if ( scrollY < descripY && fixedShare ) {
                $postShare.css({
                    position: 'relative',
                    left: 0,
                    top: 0,
                    marginLeft: pullX
                });
            }
        }
 
 
        $(window).resize(function(){
            var windowW = $(window).width();
            var pulledOutside = $postShare.css('margin-left') == pullX;
            if ( windowW >= 1137 ) {
                if ( !$(window).data('scrollBound') ) {
                    if ( !pulledOutside ) {
                        $postShare.animate({ marginLeft: pullX });
						//Crear barra Vertical
						$('.botones_chicos').hide();
						$('.s_boton').show();
						$('.botones_grandes').show();
						$postShare.css('border-width', '1px');
						$postShare.width('auto');
						$postShare.css({
							marginRight: 7,
							marginTop: 0
						});
                    }
                    $(window)
                        .data('scrollBound', true)
                        .bind('scroll.positionShare', function(){
                            positionShareScroll()
                        })
                    ;
                    positionShareScroll();
                }
            } else {
                if ( pulledOutside || $(window).data('scrollBound') ) {
                    $postShare
                        .css({ position: 'relative', left: 0, top: 0 })
                        .animate({marginLeft: 0})
                    ;
					//Crear barra Horizontal
					//$postShare.append(smallButtons);
					//smallButtons = '';
					$('.botones_grandes').hide();
					$('.s_boton').hide();
 
					$('.botones_chicos').show();
					$postShare.css({
						marginTop: 5,
						marginBottom: 5
					});
					$postShare.css('border-width', 0);
 
					var content_width = $('.main').width();
					if (content_width == 'undefined') content_width = 600;
					if ( $postShare.attr('_width') ) {
						$postShare.width($postShare.attr('_width'));
						var block_width = $postShare.attr('_width');
					} else {
						$postShare.attr('_width', $postShare.width() );
						var block_width = $postShare.width();
					}
					$postShare.width(content_width);
					var add_padding = ( (content_width - block_width) / ($postShare.find('.s_boton_small').length * 2) ) + 4;
 
					//var add_padding = (642 - (88 + 120 * (buttons_count - 2) )) / (buttons_count * 2);
					//var add_padding = ( ( 642 - ( 88 * buttons_count ) ) / (buttons_count * 2) ) + 5;
					$postShare.find('.s_boton_small').css({
						paddingLeft: add_padding,
						paddingRight: add_padding
					});
 
 
                    $(window)
                        .data('scrollBound', false)
                        .unbind('scroll.positionShare')
                    ;
                }
            }
        });
        $(window).resize();
    }
});

Solamente dos cosas debemos tener presentes, la primera es definir en la linea 4 cual sera nuestro valor de referencia para el comportamiento de la barra, es decir el ancho; generalmente corresponde al container en el que se encuentra el post. En mi caso he utilizado la clase main, que se vuelve a utilizar en la linea 76 y en la 77 con su ancho.

Luego procederemos a adaptar la distancia a la que se posicionara la barra cuando nos desplacemos, al utilizar la posición fixed, el valor difiere de los 80px originales. Este ejemplo muestra la barra posicionada a unos -540px (linea 18). Este valor tenes que ajustarlo vos ya que depende de tu diseño. Una aproximación a este numero responde a: Ancho del container (en este ejemplo: main) – 80px

Una vez presentadas todas las partes solo tenemos que integrarlas en nuestro Site, dependiendo de la plataforma con lo que estemos trabajando pude variar algún detalle, pero este código sirve tanto para Wordpress como para cualquier otro CMS.

Replica de Mashable Simple

A diferencia de la opción anterior esta barra es compatible con IE6, pero no podrá ser apreciada en resoluciones menores. El scroll para este caso es una animación del padding que produce un simpático efecto final.

Demo Replica de Mashable

HTML

Es casi el mismo markup de la primera opción pero sin incluir los botones pequeños ya que no son necesarios.

	<div id="social_bar_wrapper">
			<div id="social_bar">
				<div class="botones_contenedor">
					<div class="gbuzz s_boton">
						<script type="text/javascript" src="http://button.njuice.com/buzz.js">
</script>
					</div>
					<div class="tweetmeme s_boton">
						<script type="text/javascript">
tweetmeme_source = 'baires';
tweetmeme_url = '<?php the_permalink(); ?>';
 
</script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
</script>
					</div>
					<div class="faceboook s_boton">
						<script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript">
</script>
					</div>
				</div>
				<div class="s_boton">
					<a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=EliseosNet&amp;loc=es_ES" id="s_email" class="social_sprites" name="s_email">email</a>
				</div>
				<div class="s_boton">
					<a class="a2a_dd social_sprites" id="s_share" href="http://www.addtoany.com/share_save?linkname=My%20Sitio&amp;linkurl=mi-url.com" name="s_sharethis">Share</a><script type="text/javascript">
a2a_linkname="My Sitio";a2a_linkurl="mi-url.com";
</script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js">
</script>
				</div>
			</div>
		</div>

También se ha añadido un wrappera la barra para poder controlar el margin.

CSS

Es exactamente el mismo de la primera opción, con el adicional de wrapper y sin los botones pequeños.

#social_bar_wrapper{
	position: absolute;
	margin-top:20px;
}
 
#social_bar {
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #DDDDDD;
float:left;
margin-left:-80px; /* // La distacia de la barra que queremos tener en relacion al post */
margin-right:10px;
position:relative;
 
}
 
/* // Formato de los Botones grandes */
.s_boton {
padding:5px;
clear:left;
margin:0;
}
 
/* //Iconos para los links de Share y Email */
#social_bar a#s_email.social_sprites {
background-position:2px -32px;
text-decoration: none;
}
#social_bar a:hover#s_email.social_sprites {
background-position:2px -50px;
color:#4c545b;
text-decoration: none;
}
 
#social_bar a#s_share.social_sprites {
background-position:0px 4px;
text-decoration: none;
}
 
#social_bar a:hover#s_share.social_sprites {
background-position:0px -14px;
color:#4c545b;
text-decoration: none;
}
 
#social_bar a.social_sprites {
-moz-border-radius:3px 3px 3px 3px;
background:url(../images/social_sprites.png) no-repeat scroll 0 0 #FFFFFF;
border:1px solid #E8E8E8;
color:#989898;
display:block;
font:9px/1.625 verdana,sans-serif;
margin:0;
padding:2px;
text-align:right;
width:44px;
}

Quizás lo único que tengas que modificar es la distancia a la que se encuentra la barra con respecto del contenido, para este ejemplo es -80px (dentro de #social_bar). No te excedas en mas de -100px o no sera visible en varias resoluciones.

jQuery

Como te lo adelante anteriormente solamente animamos el padding (gracias CSS Tricks), no es necesario modificar este código a no ser que sepas lo que estas haciendo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

	$(function() {
 
    var $sidebar   = $("#social_bar"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;
 
    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
 
});

Por ultimo solo resta presentar todo en nuestro diseño y tendremos otra alternativa a a barra de Mashable.

Cualquier duda que tengas, hacémelo saber.

El HTML del que les hablaba es muy simple, solamente podemos escribir <div>Content</div> o <p>Content</p> y la magia de CSS se hará cargo de ahí en mas.

La mención honorifica se la llevan los pseudo-elements :before y/o :after que crearan nuestras formas (Speech bubbles) y las propiedades border-radius y transform son los condimentos.

Si nos ponemos a trabajar con los pseudo-elements y las propiedades arriba mencionadas podemos lograr resultado muy interesantes.

Un ejemplo de esto, puede ser este CSS donde se creara un Speech Bubble con un triangulo isoceles en la parte inferior

/* Bubble con triangulo isósceles
------------------------------------------ */
 
.triangle-isosceles {
   position:relative;
   padding:15px;
   margin:1em 0 3em;
   color:#000;
   background:#f3961c;
 
   /* css3 */
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   background:-moz-linear-gradient(top, #f9d835, #f3961c);
   background:linear-gradient(top, #f9d835, #f3961c);
}
 
/* crear triangulo */
.triangle-isosceles:after {
   content:"\00a0";
   display:block; /* reduce the damage in FF3.0 */
   position:absolute;
   z-index:-1;
   bottom:-30px;
   left:50px;
   width:0;
   height:0;
   border-width:15px 15px;
   border-style:solid;
   border-color:#f3961c transparent transparent;
}

Dentro del demo podras observar el comportamiento y acceder a todo el CSS necesario para que puedas ver en detalle como funciona cada shape y así poder implementarlas o crear shapes propias.

Como lo sabrás cada Theme tiene su propia hoja de estilos que es lo que le formato en definitiva. Si necesitáramos personalizar nuestras entradas, tendríamos que editar la hoja de estilos del Theme; cosa que puede ser algo molesto si solo necesitamos personalizar una entrada en concreto.

Con esta pequeña función, estaremos añadiendo un Box para que la hora de crear un Post o Pagina podamos insertar un estilo para cada entrada/pagina en concreto.

Por medio de filtros y acciones esta función insertar en el header de nuestro Theme, el estilo que le hayamos aplicados. Solo tenes que cerciorarte que Theme cuente con wp_head(); dentro del Header.

Uso

En tu archivo functions.php inserta lo siguiente:

 //Custom CSS 
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
	global $post;
	echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
	echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
	if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_css = $_POST['custom_css'];
	update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
	if (is_page() || is_single()){
		if (have_posts()) : while (have_posts()) : the_post();
			echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
		endwhile; endif;
		rewind_posts();
	}
}
 
//End Custom CSS

Ahora cada vez que escribas una entrada/pagina encontraras este box para insertar tus estilos:

Como lo veras esta función es bastante flexible por lo sera posible adaptarla, para por ejemplo también poder incluir scripts en nuestro Header.

Este Framework utiliza referencias simples de recordar y lógicas, por ejemplo; si necesitáramos crear un DIV de un height de 700px y un width de 500px, solo haríamos referencia a esta clase:

<div class=”rl w500 h700”>
    <div class=”rl w50 h70”></div>
</div>

Otro punto fuerte es el hecho de que Markercss se encuentra sub-dividido en distintos temas para una mejor compresión y aplicación: bordes, fondos, links, etc.

Como lo habrás notado los CSS Framework son cada vez mas comunes y potentes, hay opiniones encontradas a favor y en contra de ellos, pero en definitiva están aquí para quedarse.

Su funcion es muy simple cuando pegamos nuestro HTML PrimerCSS nos devuelve una hoja de estilo con todos los ids' y class's involucrados, algo que te te hara ganar mucho tiempo.

#grid se a adapta a cualquier diseño, pero por defecto esta herramienta asume que esta trabajando con un ancho de 980px + 20px para el glutter. Tambien, por defecto se asume que el Vertical Rhythm esta basado en un lead de 20px. Pero todas estas opciones son configurables y adaptables a nuestro diseño.

Y por ultimo #Grid cuenta con una serie de shortcuts para hacernos la vida mas fácil, como mostrar y esconder la grilla, o convertir la grilla en sticky.

El día de hoy Font Squirrel ha dado un paso mas y no solo ofrece sus kits sino que también cuenta con un generador para subir nuestras fuentes y crear nuestros kits.

Por defecto Font Squirrel nos generara un kit con los siguientes formatos:

• El archivo original, ya sea .ttf u .otf para Firefox 3.5 y Safari
• Un formato .eot propio de Internet Explorer
• Un formato .svg para Opera, Iphone y Chrome
• Y por ultimo un formato .woff pensado a futuro a convertirse en un standard

Como te lo he mencionado, no todas las fuentes son elegibles para ser embebidas en la web. Es muy recomendable leer bien los legales de cada fuentes para no llevarnos sorpresas.

Easy incluye los siguientes archivos para que comiences a trabajar:

• Un documento html en blanco que incluye los links necesarios para que comiences con la produccion
• Un documento HTML a modo de demo para observar como se comporta el Framework
• Hojas de estilos, screen.css y print.css
• easy.js donde de se incluyen todas las funciones mencionadas
• main.js para añadir o modificar nuevas funciones
• Una versión comprimida de jQuery

La documentación de Easy es muy rica, por lo que no te toparas con problemas a la hora de implementar este Framework.

A la técnica a la que hago referencia es tomada de Zurb, la cual funciona para los anchor a o button.

Basicamente se trata de combinar algunas de las nuevas reglas CSS3 como text-shadow, box-shadow y border-radius junto con el uso correcto de RGBa

Comencemos

Nuestro markup

<button class="large button blue" type="submit">Super Cool Button</button>

Como lo menciones anteriormente funciona tanto para los anchor a o button

CSS Básico

Este seria el esqueleto de nuestro botón de esta class se van a apoyar luego otras para dar el efecto final.

.button
{
	background: #222 url(images/overlay-button.png) repeat-x 0 0;/* Pequeño PNG que funciona a modo de gradient */
	border-bottom: 1px solid rgba(0,0,0,0.25);/* Borde negro con transparencia en 25%*/
	color: #fff !important;
	cursor: pointer;
	display: inline-block;/* Alinear corectamente el boton*/
	font-size: 13px;
	font-weight: bold;
	line-height: 1;
	-moz-border-radius: 5px;/* Borde para Firefox */
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);/* Sombra negra en 25% para Firefox*/
	overflow: visible;/* contedido sobrante visible*/
	padding: 5px 15px 6px;
	position: relative;
	text-decoration: none;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);/* Sombra negra en 25% para el texto */
	webkit-border-radius: 5px;/* Borde para Webkit*/
	webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);/* Sombra negra en 25% para Webkit*/
	width: auto;/* Importante para que el boton se ajuste a nuestro texto */
}

Estados del boton

Para este caso solo vamos a personalizar el hover y el active para dar el efecto al presionar el botón y posicionar el cursor sobre él.

.button:hover
{
	background-color: #111;
	color: #fff;
}
.button:active
{
	top: 1px;
}

Tamaños del boton

Tenemos tres tamaños para “jugar” con nuestro botón. El medium, que seria el aplicado por defecto, el small un poco mas reducido en su tamaño; y el large un poco mas grande, obviamente gracias al padding que le aplicamos.

.small.button
{
	font-size: 11px;
}
.large.button
{
	font-size: 14px;
	padding: 8px 19px 9px;
}

Estilo del boton

Dejo como ejemplo un botón de color azul-claro. Podes ajustar aquí el color del botón a tus necesidades

.blue.button
{
	background-color: #2daebf;
}
.blue.button:hover
{
	background-color: #007d9a;
}

Nuestro boton final

Hemos terminado con nuestra hoja de estilo por lo cual procedemos al markup en HTML:

<button class="large button blue" type="submit">Super Cool Button</button>

Y se vería de la siguiente forma:

Conclusiones

Como lo podes observar el botón es muy simple de implementar, y lograras un resultado casi uniforme en todos los navegadores. Una de las contras que tiene esta técnica es que ciertas propiedades de CSS3 no son 100% soportadas por todos los navegadores, pero el resultado sera ligeramente similar. También te recomiendo que leas en Zurb un poco mas sobre esta técnica y experimentes para poder lograr un botón que adapte a tus exigencias.

Muchas veces no estamos seguro si la fuente que estamos visualizando en nuestro sistema se comportara de la misma forma, o si el renderizado según cada navegador sera el mismo (seguramente no). Por eso con Web Font Specimen podemos hacer un test rápido para ver como se ajusta dicha fuente a la web mediante un HTML que el proyecto nos facilita.

Solo debemos hacernos con una copia de Web Font Specimen, cargar nuestra fuente y modificar unas lineas para hacer el llamado a dicha fuente mediante @font-face

Este proyecto nos mostrara como se comporta la fuente teniendo en cuneta los encabezados, listas, texto en cursiva y negrita, diferente tamaños en el body, etc.