Boutons en utilisant uniquement CSS
Attention
Cet article a été publié il y a plus d'un an, il peut y avoir des développements été.
S'il vous plaît prendre en compte.
Dans l'article d'aujourd'hui, nous voyons comment transformer un simple formulaire, Un bouton n'est pas formatée sous une forme aussi simple avec un bouton en forme. Toutes les couleurs, dégradés et des ombres seront “bâti” en utilisant les règles CSS pour la version 3. Ces quelques règles simples sont à prendre un certain’ avec des pinces, parce qu'ils fonctionnent parfaitement avec le navigateur basé sur Webkit (Safari, Konquerror, iPad / iPhone) e Gecko (Firefox e simili), mais elles sont inutiles sur toutes les versions d'Internet Explorer antérieures à 9.
Commençons par le code HTML. Nous allons également connecter le fichier “style.css”:
<html>
<tête>
<link rel ="stylesheet" href ="style.css" type ="text / css" charset ="utf-8" />
</tête>
<corps>
<former action ="#">
<tableau>
<tr>
<td>Nom:</td><td><input type ="texte" name ="Nom" value =""></td>
</tr>
<tr>
<td>Courrier:</td><td><input type ="texte" name ="courrier" value =""></td>
</tr>
<tr>
<td colspan ="2" align ="centre"><bouton id ="bouton">Envoyer</bouton></td>
</tr>
</tableau>
</forme><!--fin forme ->
</corps>
</html>
Sans la mise en forme proposée par CSS ce serait le résultat “noeud et brut”.
1. Home Style
Nous commençons à entrer à l'intérieur de notre “style.css” les lignes de code suivantes pour donner du style à la touche:
bouton{
largeur: 100px;
contour: aucun;
curseur: aiguille;
text-align: centre;
text-decoration: aucun;
font: gras 12px Arial, Helvetica, sans-serif;
couleur: #fff;
rembourrage: 10px 20px;
frontière: 1px solid # 0076a3;
fond: #0095cd;
}
En attendant, nous donnons une taille fixe, texte allineamo dans le centre sans décorations, elle est définie la police (font), la couleur (couleur) et les distances par rapport aux autres éléments (rembourrage). Ensuite, nous avons mis la couleur de fond du bouton et la couleur de la bordure. Ceci est le résultat:
2. Fond dégradé
Nous pourrions alors ajouter un dégradé à la couleur de fond, à envoyer un à trois dimensions. Nous ajoutons les lignes suivantes à l'élément “bouton” la nostro “style.css”:
fond: -webkit-gradient(linéaire, en haut à gauche, bas à gauche, à partir de(#00services), à(#0078a5)); fond: -webkit-linear-gradient(supérieur, #00services, #0078a5); fond: -moz-linear-gradient(supérieur, #00services, #0078a5); fond: -ms-linear-gradient(supérieur, #00services, #0078a5); fond: -o-linear-gradient(supérieur, #00services, #0078a5);
Parmi ces lignes il y a peu d'expliquer, ajouter un dégradé vertical à l'arrière-plan. Ceci est le résultat:
3. Arrondir les angles
Selon vos préférences, nous pouvons vouloir arrondir les angles de la touche. Nous ajoutons les lignes suivantes à l'élément “bouton” la nostro “style.css”:
-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
Il peut être utile de comprendre comment ces valeurs. Vous devez jouer un peu’ pour trouver le résultat souhaité. Ci-dessous est le résultat:
4. Ombre
Pour donner la touche finale de la tridimensionnalité est nécessaire de donner un léger ombrage. Nous ajoutons ces derniers éléments lignes “bouton” la nostro “style.css”:
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); box-shadow: 0 1px 3px rgba(0,0,0,0.5);
Ceci est le résultat:
Et maintenant que nous avons un bouton avec un style que vous avez juste à définir l'action classique sur la souris et cliquez sur. Les lignes suivantes pour ajouter le fichier “style.css”:
bouton:planer {
fond: #0095cd;
fond: -webkit-gradient(linéaire, en haut à gauche, bas à gauche, à partir de(#0078a5), à(#00services));
fond: -webkit-linear-gradient(supérieur, #0078a5, #00services);
fond: -moz-linear-gradient(supérieur, #0078a5, #00services);
fond: -ms-linear-gradient(supérieur, #0078a5, #00services);
fond: -o-linear-gradient(supérieur, #0078a5, #00services);
fond: gradient linéaire-(supérieur, #0078a5, #00services);
}
bouton:actif{
poste: par rapport;
supérieur: 1px;
}
Et ceci est le résultat de la course:
0 commentaires