En-tete Astuces divers html et css
Classic Moderne

créer un bouton entièrement en CSS sans image:

Dans ce tutoriel, nous allons utiliser différentes techniques CSS qui vont par exemple nous permettre de réaliser un bouton, sans utilisation d’images. Ces techniques sont utilisables sur tous les éléments d’une page web

Exemple complexe:

Press




Tout d’abord, commençons par le code HTML nécessaire. Dans cet exemple, un simple paragraphe suffit :


<p>Bouton Press</p>

Bouton Press


Appliquons-lui quelques styles par défaut : une taille, une police, une couleur, un alignement.


p
{
font-family: Arial,sans-serif;
font-size: 1.6em;
width: 200px;
height: 43px;
padding-top: 12px; /*permet le centrage vertical*/
text-align: center;
color: #000;
background: #444;
}


Bouton Press


Commençons tout d’abord avec un dégradé dont la syntaxe est la suivante :


p
{
...
background: #444;
background: -webkit-linear-gradient( #555, #2C2C2C);
background: -moz-linear-gradient( #555, #2C2C2C);
background: -ms-linear-gradient( #555, #2C2C2C);
background: -o-linear-gradient( #555, #2C2C2C);
background: linear-gradient( #555, #2C2C2C);
}

Ici nous appliquons donc un dégradé partant du haut vers le bas, avec un gris #555 en haut et un gris #2C2C2C en bas.

Je laisse volontairement la valeur background: #444 pour la dégradation gracieuse dans les navigateurs trop ancien.

Bouton Press


Continuons notre CSS avec les coins arrondis. Pour cela, rien de plus simple, ajoutez simplement la déclaration border-radius :


p
{
...
border-radius: 8px;
}


Bouton Press


Les effets de lumière pour plus de réalisme
Pour ajouter un peu de volume et de réalisme, nous allons ajouter plusieurs ombres. Tout d’abord, une ombre sur le texte lui même avec text-shadow, puis deux ombres différentes sur la boite avec box-shadow.

L’ombre du texte tout d’abord.
Notre ombre sera blanche et décalée de 1px vers le bas, sans aucun flou. Cela a pour incidence la création d’un texte incrusté.



p
{
...
text-shadow: 0px 1px 0px white;
}


Bouton Press


Cependant, l’effet étant un peu fort avec du blanc, utilisons plutôt la fonction rgba. Notre code CSS sera donc plutot :


p
{
...
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.3);
}

Cela nous permet donc d’utiliser un blanc transparent pour un effet adouci

Bouton Press


Après l’ombre sur le texte, ajoutons les ombres sur la boite avec box-shadow. Pour ce bouton, nous avons besoin de 2 ombres :
• La première derrière le bouton avec un flou de 5px, de couleur noire avec une transparence de 50%.
• La deuxième pour créer le haut du bouton est une ombre blanche avec une transparence de 40%.


p
{
...
box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 0 -1px 0 rgba( 255, 255, 255, 0.4);
}


Bouton Press


Voila, l’état initial de votre bouton est terminé. Ajoutons à présent à ce bouton différents états.

Nous allons ajouter deux états différents :
• :hover : nous allons éclaircir le dégradé.
• :active : nous allons simuler l’état enfoncé du bouton.


Tout d’abord, gestion du :hover, donc à savoir, lorsque l’utilisateur passe sa souris sur le bouton. Voici le code :


p:hover
{
color: #222;
background: #555;
background: -webkit-linear-gradient( #777, #333);
background: -moz-linear-gradient( #777, #333);
background: -ms-linear-gradient( #777, #333);
background: -o-linear-gradient( #777, #333);
background: linear-gradient( #777, #333);
}

Comme dit plus haut, toutes les couleurs sont donc légèrement éclaircies. Voici l’effet :


Bouton Press


Ensuite, pour l’effet :active, à savoir donc lorsque l’élément est cliqué, nous allons créer un effet de bouton enfoncé. Pour cela, nous appliquons le même dégradé qu’à l’état initial mais nous modifions également les ombres de la boite pour les appliquer à l’intérieur, avec le mot-clé inset. Regardez le code :


p:active
{
color: #000;
background: #444;
background: -webkit-linear-gradient( #555, #2C2C2C);
background: -moz-linear-gradient( #555, #2C2C2C);
background: -ms-linear-gradient( #555, #2C2C2C);
background: -o-linear-gradient( #555, #2C2C2C);
background: linear-gradient( #555, #2C2C2C);
box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
}


Bouton Press


Il y a également une deuxième ombre qui se trouve vers le bas du bouton. Celle-ci est blanche avec une transparence de 40%.

Et voilà l’effet :active

Bouton Press











Haut-de-Page