Créer des boutons cliquables avec CSS3

Quelques exemples de boutons Full CSS3

Je vous précise que l'affichage optimal de ces boutons se génère sous Firefox ou Chrome, Internet Explorer étant une fois de plus à la bourre (mais il y à tout de meme des solutions) :

Définir une "class" et ses deux sélecteurs

Lors de l'utilisation d'un bouton sur un site web, nous constatons en général 3 états visuels symbolisant nos actions :

• l'état au repos, qui n'est autre que le design que vous aurez défini et permettant une intégration harmonieuse de votre bouton au sein de votre page.
• l'état au survol permettant de confirmer à l'utilisateur, par un effet visuel, que le curseur de la souris est bien placé sur le bouton
• l'état dit actif confirmant, par une autre transition graphique, que le clic de la souris à bien été effectué sur le bouton

Si l'état au repos est obligatoire, les 2 autres transitions reste utilisées pour dynamiser votre page et confirmer à l'utilisateur sa navigation. Bien que facultatives, je ne saurais que trop vous conseiller de mettre en place ses 2 compléments de "class" symbolisés par les sélecteurs ":hover" et ":active" que vous avez déjà surement rencontré (ils sont fréquemment utilisés pour les liens texte).

La "class" principale

Comme toute règle CSS, celle-ci sera attaché à votre élément en attribuant à ce dernier un 'id" ou une "class". L'id ne pouvant etre utilisé qu'une seule fois sur la meme page, définissez les règles de style de vos boutons par des "class" afin de vous permettre l'intégration de plusieurs boutons identiques sur une meme page.

Pour définir votre style, il vous suffira alors d'y indiquer les propriétés CSS adéquates et d'en définir leur valeur

Ce code est commenté, vous permettant d'en comprendre les différents points.

Vous constaterez que je définis les couleurs en RGBA pour une raison toute simple : ce mode me permet d'influencer sur l'opacité, un plus non négligeable pour définir des effet de transition et affiner le design.

D'autre part, je fais le choix ici de vous donner un exemple de couleurs en dégradé. Certes j'aurais pus faire plus simple mais du coup vous pourrez facilement reproduire cette effet car vous en connaitrez les "secrets". Je vous en dis un peu plus :

Vous avez maintenant définit le design global de votre bouton, nous allons maintenant le dynamiser un peu

Le sélecteur :hover

Celui-ci, ajouter à la "class" de votre bouton, permet de définir le comportement de votre élément lorsque le curseur de la souris se trouve placé dessus.
En général il y à peu de propriétés à modifier mais sachez que vous avez libre court.
Pour le comportement du bouton d'exemple, nous renforcerons le visuel du texte (en influant sur le fond) pour confirmer la prise en compte de la position du curseur et informer le visiteur qu'il est bien placé sur le bouton

Le sélecteur :active

Ce dernier intervient lorsque l'utilisateur clique sur le bouton.

De meme que pour le sélecteur précédent, vous avez libre court. Pour ma part, je me contenterais de donner un léger effet d'enfoncement au bouton en influant sur la couleur de fond et les ombres de contours

Le cas Internet Explorer

Ce navigateur étant le mauvais élève du groupe, celui-ci n'a toujours pas implémenté la propriété "background: linear-gradient".

Pour faire face à ce contretemps, vous avez 2 solutions:

• définir un background-image à l'aide d'une image que vous aurez préalablement créée mais cette astuce peut vite s'avérer cotraignante si votre site comporte un grand nommbre de boutons différents en design et dimensions.
• atténuer un peu les effets de couleurs de vos boutons en leur ettribuant un background de couleur uniforme, la solution choisie ici

la première étape consite à placer dans votre site une feuille CSS spécifique à Internet Explorer. S'il est est utile dans le cas de ces boutons, son utilisation se révèlera vite un atout dans l'élaboration de l'ensemble du design de votre site pour contrer les refus de ce navigateur.
Nous l'appelerons, ici, tout simplement "IE.css".
Pour appeler dans vos pages html cette feuille de style spécifique, il vous suffit de rajouter dans votre <head> cette simple ligne de code

Ainsi, chaque fois que votre page sera ouverte avec Internet Explorer, ce navigateur (et uniquement celui-ci) ira chercher les informations nécessaire dans cette feuille de style.

Dans cette feuille, nous inscrirons uniquement les propriétés à rectifier, inutile de réécrire l'ensemble de vos styles. Dans le cas de notre boutons, l'ajout sera

Vous permettant ainsi d'afficher une couleur de fond à votre bouton en contrant le dégradé préalablement définit.

Intégrer le bouton dans votre page HTML

Pour intégrer votre bouton, rien de plus simple. Nous restons dans les bases du code HTML puisqu'il ne s'agit que d'une balise <div> avec une "class" attachée

Définir une url de redirection à ce bouton

Pour l'url de redirection, 2 méthodes :

• la définir sur le texte, mais personnellement je trouve ceci un peu restrictif car oblige le visiteur à placer son curseur sur le texte
• la définir sur le balise <div>, méthode que je préfère car autorise un champ de clic plus en adéquation avec l'esprit d'un bouton

Une fois le lien défini, vous vous retrouvez en possession d'un bouton fonctionnel.

Et voilà, vous avez maintenant les bases de la création d'un bouton en full CSS3 et de son intégration dans votre page HTML.