Dans ce tuto jQuery nous allons voir comment réaliser un boutton avec un effet d'opacité grâce au FadeTo.

Jetez un oeil à ces autres tuto jQuery 1.5

Création d'un formulaire web 2.0Création d'un formulaire…
Dans ce tuto jQuery nous allons apprendre à nous servir de…

Réaliser un site internet adapté au mobileRéaliser un site internet…
Dans ce tuto nous allons voir comment réaliser un site internet…

Animer un backgroundAnimer un background
Dans ce tuto jQuery, nous allons voir ensemble comment créer…

Menu avec effet élastiqueMenu avec effet élastique
Dans ce tuto nous allons voir ensemble comment creer un menu…

Réaliser un site internet adapté au mobileRéaliser un site internet…
Dans ce tuto nous allons voir comment réaliser un site internet…

Création d'un formulaire web 2.0Création d'un formulaire…
Dans ce tuto jQuery nous allons apprendre à nous servir de…

Menu avec effet élastiqueMenu avec effet élastique
Dans ce tuto nous allons voir ensemble comment creer un menu…

Menu animé fluideMenu animé fluide
Dans ce tuto jQuery, nous allons voir qu'il est de créer un…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto jQuery 1.5 de 8 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

creatiq , Formateur

Souvent autodidacte et grâce à mon expérience professionnelle, j'aimerais désormais donner un coup de pouce à ceux qui souhaitent progresser dans plusieurs domaines.

En savoir plus sur creatiq


Témoignage des clients de creatiq

Formateur incroyable. Explique très bien ces tuto !

Bon Formateur !!! Bon courage pour la suite Creatiq !!!!

Encore un très bon formateur qui me donne lui aussi de plus en plus envie d'utiliser tuto.com et de même pourquoi pas part la suite moi aussi devenir formateur. Explications clairs et utiles. Merci beaucoup! Je recommande !

Simple, net et très efficace :)

Tres bon auteur qui je crois possède aussi un site web dont j'apprécie les vidéos A recommander pour ses vidéos

Lire les autres témoignages

 

D'autres tuto de creatiq

Menu ultra-simpleMenu ultra-simple
Dans ce tutoriel, nous allons voir une manière très rapide et très simple de gérer…

Menu animé fluideMenu animé fluide
Dans ce tuto jQuery, nous allons voir qu'il est de créer un menu animé fluide, en le…

Commandes de baseCommandes de base
Nous allons voir ensemble dans ce tuto quelles sont les commandes fondamentales de linux.…

Créer une ombreCréer une ombre
Dans ce tuto CSS, nous allons voir ensemble qu'il est possible de créer des ombres par…

voir tous les tuto de creatiq

Notes attribuées par les utilisateurs (9 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (10)

par yglevarecà voté :
(a téléchargé ce tuto - 13 mai 2012)

" Beaucoup de fautes de syntaxe durant la rédaction du tuto, qui se corrigent on ne sait comment.
Le code est faut à la fin:
.append('<span class="hover"</span>'>)
il manque donc un > fermant le span, mais l'exemple marche malgré tout... "

par Adel1982
(a téléchargé ce tuto - 26 septembre 2011)

" Bonsoir tout le monde,

Excellent tuto en effet.
Cependant je rencontre un petit soucis assez embêtant, je souhaite reproduire le tuto dans un bouton avec un lien en html à l'intérieur voici mon code :

<div class="bouton">
<a href="#">VALIDEZ</a>
</div>

Malheureusement après avoir ajouté ce lien l’animation au survol de la souris est décalé vers le bas et je n'es pas réussi à trouver la parade.

Merci encore pour ton travail, c'est vraiment top.

Adel "

par creatiq
(auteur de ce tuto - 22 juin 2011)

" @malloc77
Hum bizarre .., allez sur le site, télécharger le fichier source au pire .
Sinon envoyez moi votre réalisation par mail, si j'ai un peu de temps, je regarderais :)
mail : contact@creatiq.fr "

par malloc77
(a téléchargé ce tuto - 21 juin 2011)

" Bonjour,
j'ai reproduis votre tuto. Sauf que j'ai essayer de reproduire la chose avec plusieurs liens, donc plusieur images photoshop.
J'ai directement integre le &lt;span class=&quot;hover&quot;&gt;&lt;/span&gt; et les style avec les liens vers mes images pour chaque bouton directement dans le HTML.
Donc logiquement je n'ai pas a faire le .append('&lt;span class=&quot;hover&quot;&gt;&lt;/span&gt;').each...
Mais directement $('.bouton').each...

Sauf que sa ne fonctionne pas... Pouvez-vous me donner une piste svp ?

Merci

(Veuillez m'excuser pour les accents, clavier anglais) "

par creatiq
(auteur de ce tuto - 23 avril 2010)

" Je prends note :) "

par xkliber
(a téléchargé ce tuto - 23 avril 2010)

" Assez simple mais il en faut donc sympa pour les débutants.
Un petit conseil, les caractères spéciaux (accentués ou autres) en HTML commencent bien par une esperluette (&quot;et&quot; commercial soit &quot;&amp;&quot;) et se terminent, par contre, par un point-virgule qui n'est pas là pour faire joli. ;)
Si je peux m'en permettre un autre : attention à la voix. ;)
Le sourire et/ou la joie, même simulé(e)(s) s'entend(ent).
Un peu plus d'entrain ferait un tuto plus sympa à écouter. :)

Bonne continuation en tout cas. :) "

par creatiq
(auteur de ce tuto - 20 avril 2010)

" Merci à toi aurelWEB "

par aurelWeb
(a téléchargé ce tuto - 20 avril 2010)

" C'est vraiment génial les boutons animé avec jquery, j'ai testé et ça marche impec c comme du flash sans flash. Bon tuto et bien expliqué en + merci jeijei. "

par creatiq
(auteur de ce tuto - 14 avril 2010)

" Merci :) "

par ARichià voté :
(a téléchargé ce tuto - 14 avril 2010)

" Excellent tutoriel, très bien expliqué et très facile à comprendre :)

Flo "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto jQuery 1.5 d’une durée de 8 minutes a été téléchargé 967 fois et a reçu une note moyenne de 4/5.

Ce tuto a été publié le 14 avril 2010 par creatiq, contributeur, ayant reçu une note moyenne de 3,9/5 pour l’ensemble de ses vidéos.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !