Botones animados elegantes para tú sitio web

Botones animados y elegantes para tú sitio web con jQuery, hoy en día existen botones para todo tipo de interacciones como por ejemplo: para descargar, archivar, bloquear, buscar, remover, para guardar entre otros.

Pues bien “loda button” es un plugin que tiene como finalidad presentar botones con animación, a este plugin no le encontramos ninguna utilidad en cuanto a problemas cotidianos, sin embargo este plugin puede darle una perspectiva diferente a los botones tradicionales.

La forma de usarlos es muy sencilla simplemente con este código :

<div><!-- Agrega las direcciones de style.css y loda-button.css--></div>
<div id="LC6"><link rel="stylesheet" href="../loda-button.css" /></div>
<div></div>
<!--Usa los diferentes llamados-->

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-lock"></span>
 Lock
 </a>

<a href = "#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-drawer"></span> Archive
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-upload"></span> Upload
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-download"></span> Download
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-connection"></span> Connect
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-user"></span> User
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-search"></span> Search
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-phone"></span>
 Phone
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-star"></span>
 Star
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-remove"></span>
 Remove
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-mail"></span>
 Mail
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-flickr"></span>
 Flickr
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-share"></span>
 Share
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-file-pdf"></span>
 PDF
 </a>

<a href="#" class="loda-btn">
 <span aria-hidden="true" class="loda-icon icon-disk"></span>
 Save
 </a>

Demostración: http://lugolabs.com/blog/2013/06/23/loda-button

The post Botones animados elegantes para tú sitio web appeared first on Develoteca.