Pastel Button : des boutons sexy en jQuery et CSS
- 29-05-2010
- Posté dans css . jQuery
- Écrire un commentaire
Transformez n'importe quelle balise HTML en bouton, comme celui-ci :
Fonctionne avec toutes les balises HTML, en sachant que les balises <button>, <a> et <input type="submit"> sont transformées en <span>, puis est appliqué un javascript permettant de reproduire l'action de la balise.
Télécharger Pastel Button v1.1
Attention : pour activer le hack CSS3 sur IE qui permet d'avoir les ombrages et les coins arrondis, il faut éditer le fichier javascript et adapter la variable pastelButtonAbsolutePath.
Chargement du plugin
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="pastelbutton.min.js"></script>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="pastelbutton.css" />
Utilisations par l'exemple
<button class="pastelButton">Mon bouton de test 1</button>
<span class="pastelButton">Mon bouton de test 2</span>
<a href="monlien.html" class="pastelButton">Mon bouton de test 3</a>
<form action="macible.php"><input type="submit" class="pastelButton" value="Mon bouton de test 4" /></form>
<script type="text/javascript">
jQuery('.pastelButton').pastelButton();
</script>
Embellir avec CSS
Augmenter la hauteur du bouton
.pastelButton {
height: 100px;
}
Aligner le bouton au milieu
.pastelButton {
margin: auto;
width: 200px; /* largeur à adapter en fonction du texte */
}
Changer la couleur de fond et ajouter une image
.pastelButton {
background-color: #80D9F9; /* En attendant le chargement de pastelButton : doit être plus foncé que .pastelButton .level1 */
}
.pastelButton .level1 {
background-color: #85DFFF;
}
.pastelButton .level2 {
background: url("monimage.png") no-repeat scroll 8px 8px;
}
Modifier la police
.pastelButton * {
font-size: 16px;
font-weight: bold;
}
Mise en ligne de la version 0.2
Change log :
– création de la fonction pastelButton
– ne recrée pas le bouton une 2ème fois si on appelle pastelButton plusieurs fois
– ne crée pas le bouton s'il n'est pas visible (sinon width et height sont erronés)
– suppression du lancement automatique pour les éléments de classe pastelButton
– passage en jQuery au lieu de $
– création d'une version compressée
Mise en ligne de la version 1.0
Change log :
– Ajout du hack css3 pour IE (merci à http://css3pie.com ) : maintenant pastelButton devient pleinement fonctionnel sur tous les navigateurs
– .pastelButton * {position: relative}
Attention : pour activer le hack CSS3 sur IE qui permet d'avoir les ombrages et les coins arrondis, il faut éditer le fichier javascript et adapter la variable pastelButtonAbsolutePath.
Mise en ligne de la version 1.1
Change log :
– PIE passe en version 1.0beta2, application du plugin que pour IE8 car il y a des bugs avec IE7
– remplacement de {background:"none",border:"none"} par {backgroundColor: 'transparent', borderColor: 'transparent'} pour IE9
Je ne l'ai pas testé, mais cc3pie passe en version béta 3 :
http://css3pie.com/2010/12/06/pie-1-0-beta-3-released/