Animación para botones

En este blog ya hemos hablado de la importancia de las redessociales para publicitar el contenido de nuestro blog. Existen numerosas formaspara incluir los botones correspondientes de las principales redes sociales ennuestro blog, hoy queremos añadir un pequeño script para dotar dichos botonesde cierta animación.

Antes denada necesitamos incluir en la plantilla de nuestro blog las libreríasnecesarias, para ello debemos acceder al editor en html de nuestra plantilla, localizaremos la etiqueta e insertaremos el siguiente código

Una vez que tengamos instalados las librerías quedotarán de movimiento a los botones, tendremos que incluir el código html paraaplicar los estilos oportunos a los botones. Para ello deberemos localizar la etiqueta ]]> einsertaremos el siguiente código:

.button_wrap{ position :relative; width:225px; height:36px; overflow:hidden;font-weight:bold; font-size:11px; margin :10px;

}

.button_aRight{ width:70px; height:36px;-moz-border-radius:20px; -webkit-border-radius:20px; background-color:# 093d6f ; color:#fff; top:0px; left:0px; position:absolute; line-height:36px;text-align:right;

}

.button_aRight span{ /* display:none; */visibility:hidden; padding-right:20px; color:#fff;

}

.button_bRight{ width:64px; height:30px;background-color:#fff; -moz-border-radius:20px; -webkit-border-radius:20px;color:#000; position:absolute;top:3px; left:3px; text-transform:uppercase; line-height:30px;text-align:center; cursor: pointer ;

}

.button_bRight span{ color:#008ddd;

}

.button_c{ background-color:#008ddd;color:#fff; text-transform:uppercase;

}

.button_c span{ color:#093d6f;

}

Por últimotendremos que insertar un gadget html/javascript donde incluiremos el siguiente código para cada uno de los botones que deseemos crear.

TEXTO_EXPANDIDO

URL "target="_blank" class="button_bRight slidebttn"id="button_bRight"> TEXTO_BOTÓN

Donde tendremos que introducir los siguientesvalores:

TEXTO_EXPANDIDO : el texto que aparecerá al pulsar sobreel botón. URL : url de la red social deseada. TEXTO_BOTÓN: el texto que mostrará el botón, suele ser elnombre de la red social.

De esta forma tan sencilla dotaremos a dichos botones deun bonito efecto sin necesidad de tener grandes conocimientos de programación.