Créer un bouton avec les coins ronds sans image pour Explorer, Firefox, Chrome, Safari

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

Dans un article antérieur, j'ai déjà parlé d'un didactitiel pour créer des boutons de formulaire avec les coins ronds. La technique utilisée était pour vanter les mérites du CSS3, mais à quoi bon l'utiliser si la majorité des fureteurs ne prennent pas encore en charge toutes ces nouvelles propriétés de CSS3 ?

Firefox, Chrome, Safari, Opera

Sous Firefox, Chrome et Safari, il est simple de créer un bouton aux coins ronds (si vous ne le voyez pas, c'est que vous n'avez pas un fureteur qui le supporte !) :

Un beau bouton !

Le code CSS qui dicte ce style est le suivant :

.coins-ronds {
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -khtml-border-radius: 5px;
   background:none repeat scroll 0 0 #E16500;
   color:#fff;
   width:150px;
   padding:5px 5px 5px 20px;
}

Vous n'avez qu'à modifier les valeurs pour ajuster la rondeur des coins.

Explorer 6,7,8,9

Pour explorer, c'est un peu plus tricky. Puisque l'engin du fureteur qui lit le CSS ne comprend pas toutes ces nouvelles propriétés, il faut lui fournir un fichier qui lui dira comment interpréter la proprité border-radius.

En effet, il existe un projet, appelé Curved corners, qui vous permet d'ajouter cette propriété à un fureteur Explorer. Il vous suffit de télécharger le fichier border-radius.htc et le charger de cette manière :

.coins-ronds {
   behavior: url('/css/border-radius.htc');
   border-radius: 5px;
   background:none repeat scroll 0 0 #E16500;
   color:#fff;
   width:100px;
   padding:5px;
}

Il faut vous assurer que le chemin d'accès vers le fichier border-radius.htc est relatif à la page chargée. Il est donc fortement conseillé d'utiliser un chemin d'accès absolu.

En savoir plus :

Commentaires

Merci HTML5 et CSS3 !! Qu'est ce que c'est contraignant de réaliser une image pour les 4 différents coins... Maintenant avec un code tout simple on arrive à faire de belles choses! Merci ;)

Ajouter un commentaire

CAPTCHA
Êtes-vous un robot ?
Image CAPTCHA
Écrivez le code apparaissant dans l'image.

Derniers articles