Creare un bottone animato per i nostri form

Scritto da il 23/03/2010 in CSS e XHTML, Web Design - 3 Commenti
2010-mar-23
Attenzione! Questo articolo é stato scritto qualche tempo fa, pertanto le informazioni contenute al suo interno potrebbero essere non del tutto aggiornate.

Con l’impiego di jQuery e CSS si possono ottenere degli interessantissimi effetti grafici ed estetici, oltre che funzionali; con questo tutorial spiegherò come riuscire a creare un’animazione di movimento sul bottone d’invio dei nostri form di contatto.

Ecco qui un esempio per rendere subito l’idea.

Ok, il nostro obiettivo é abbastanza semplice, perchè vogliamo un’icona che saltella un paio di volte quando ci si passa sopra con il mouse, quindi con effetto hover.

Il bottone di per se è costituito da un link che contiene un’immagine del nostro bottone e un testo.

<a class="button-send" href="#"><img src="send.png" alt="" />Invia</a>

Adesso ci concentreremo sul CSS:

.button-send {
padding: 4px 10px 3px 25px;
border: solid 1px #8AB134;
position: relative;
cursor: pointer;
display: inline-block;
background: url('bg.png') repeat-x;
font-size: 11px;
height: 16px;
text-decoration: none;
color: #40740D;
-moz-border-radius: 5px;
-webkit-border-radius:5px;
}
.button-send img {
position: absolute;
top: -4px;
left: -12px;
border: none;
}
.button-send:hover { color: #8AB134;}

Ho creato una classe che imposta e controlla ovviamente padding, bordi e posizione; la proprietà interessante da notare è la scelta di cursor: pointer, questo perchè cambiando il valore della proprietà possiamo impostare differenti stili. Impostando questa proprietà in maniera non corretta si può confondere l’utente, quindi fate attenzione.
Altra nota interessante è la scelta di voler creare il nostro bottone con angoli arrotondati implementando CSS3 con browser che lo supportano, Mozilla/Firefox e Chrome/Safari/Webkit, al tal proposito ho scelto di utilizzare le proprietà -moz-border-radius: 5px; e -webkit-border-radius: 5px; che imposta un angolo arrotondato di 5px.
Le altre impostazioni servono per posizionare l’immagine che salterà all’interno del bottone e l’effetto :hover sul link.
Adesso ci concentriamo sull’animazione del nostro bottone. Richiamiamo nella nostra pagina il collegamento a jQuery e lo posizioniamo all’interno del tag <head>:

<head>
    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
</head>

a questo punto pensiamo a creare l’animazione vera e propria decidendo che al passaggio del mouse sul bottone l’icona effettui un balzo, ovviamente per rendere il tutto più credibile il saltello deve essere graduale, con il primo più alto e i successivi più bassi.

<script type="text/javascript">
 $(document).ready(function(){
  $(".button-send").hover(function(){
  $(".button-send img")
    .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // primo salto
    .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // salto salto
    .animate({top:"-6px"}, 100).animate({top:"-4px"}, 100); // ultimo salto
  });
});
</script>

Copiamo e incolliamo questo codice prima della chiusura del tag <head>. Il codice crea una funzione sull’elemento .button-send al momento dell’hover (passaggio del mouse) e come risposta fa saltare l’immagine prima di 10px, poi di 7px e infine di 6px.

0saves
Se ti è piaciuto questo articolo puoi commentare oppure condividerlo online tramite i social network.
Se invece mi adori e non vuoi perderti nemmeno uno dei miei post puoi iscriverti al Feed RSS.

Autore

Appassionato di tecnologia, web e social media; scrive spesso e volentieri di argomenti inerenti il Web Design, Web Marketing, il mondo Mobile e qualche altra cosa. Collabora con HTML.it ed editori on-line nazionali. Segui @sickbrain

3 Commenti su "Creare un bottone animato per i nostri form"

  1. Bloghissimo 08/06/2010 alle 11:46 ·

    Articolo interessantissimo.. ;) Grazie mille!!

  2. daino 02/10/2011 alle 18:54 ·

    Complimenti per l’articolo! Se volessi creare un simile bottone, ma con un immagine mappata, come il bottone +1 che compare nei risultati di google, come dovrei procedere?
    Mille grazie ciao

  3. Egidio Murru 03/10/2011 alle 07:56 ·

    @daino non mi è ben chiaro cosa intendi per immagine mappata.

Scrivi il tuo commento