Tutoriel graphique sur la conception de boutons à l'aide de la technologie des portes coulissantes_Échange d'expériences

Cet article est un article traduit, adresse en texte intégral : http://diger.cn/article.asp?id=351
Adresse originale : http://www. filamentgroup.com /lab/buttonElement/

Particle Tree a récemment publié un article décrivant une technique qu'ils ont mise au point pour concevoir des éléments de bouton. Pour ceux d'entre vous qui ne sont pas compétents, les boutons de table sont sortis. est difficile à personnaliser. Les solutions typiques consistent à utiliser les boutons par défaut fournis par le navigateur ou à utiliser une entrée graphique. Lorsque la saisie graphique termine le résultat souhaité, elle demande la création d'un nouveau graphique pour chaque bouton avec son texte "Baked-in" (aucune mention de l'échanger avec des survols).

Bien que la technologie de Particle Tree offre une solution fiable, elle ne peut pas répondre à nos besoins. Nous avons besoin d'un bouton qui utilise la technologie des portes coulissantes, un véritable texte HTML qui ne nécessite pas de JavaScript pour faire défiler ou soumettre un formulaire. Le respect de ces conditions signifie que les éléments d’entrée et d’ancrage sont exclus. Évidemment, l’élément bouton est notre seul choix. La technique suivante illustre une technique de boutons multi-navigateurs utilisant la technologie des portes coulissantes.


Voir la démo 🎜>
CSS :
Le code du programme est le suivant :

CSS Pour IE6 et IE7 (parfois requis)

<button value="submit" class="submitBtn"><span>Submit</span></button>

Le code est le suivant :

Comme vous pouvez le constater, 2 images sont utilisées pour chaque état (4 images au total). En simplifiant encore, ces états peuvent être transformés en deux. Mais les premiers tests de l’idée ont donné des résultats incohérents. Prise en charge des navigateurs :

IE6, IE7, Firefox (mac/pc), Safari, Opera, Camino, etc.

button {   
  border:0;   
  cursor:pointer;   
  font-weight:bold;   
  padding:0 20px 0 0;   
  text-align:center;   
}  
button span {   
  position:relative;   
  display:block;   
  white-space:nowrap;   
  padding:0 0 0 20px;   
}  
/*blue buttons*/  
button.submitBtn {   
  background:url(images/btn_blue_right.gif) right no-repeat;   
  font-size:1.3em;   
}  
button.submitBtn span {   
  height:50px;   
  line-height:50px;  
  background:url(images/btn_blue_left.gif) left no-repeat;  
  color:#fff;   
}  
button.submitBtn:hover {  
    background:url(images/btn_blue_right_hover.gif) right no-repeat;   
}  
button.submitBtn:hover span {  
    background:url(images/btn_blue_left_hover.gif) left no-repeat;   
}

Attention : pour que le survol fonctionne dans IE6, vous devrez écrire un déclencheur de classe. Pas aussi grave que l’échange d’images.
Ce qui précède est le tutoriel graphique sur la conception de boutons à l'aide de la technologie des portes coulissantes_le contenu de l'échange d'expériences. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

button {   
  width:auto;   
  overflow:visible;   
}  
button span {   
  margin-top:1px;   
}