TheJoe.it Dans le (ouvrir) Source

14DEC/130

Boutons en utilisant uniquement CSS

css code

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. Voici quelques règles simples à prendre un peu avec une pince, 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

Internet Explorer avant 9.

Commençons par le 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".

form_non_formattata

1. Home Style

Nous commençons à entrer dans 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:

1

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);

De ces lignes, il ya peu à expliquer, ajouter un dégradé vertical à l'arrière-plan. Ceci est le résultat:

2

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 'pour trouver le résultat souhaité. Ci-dessous est le résultat:

3

4. Ombre

Pour donner la touche finale de la tridimensionnalité est nécessaire de donner un léger ombrage. Nous ajoutons ces lignes à l'élément "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:

4

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:

Content de cet article?

Inscrivez vous à notre fil rss!

Sur

Je garde ce blog comme un hobby par 2009. Je suis passionné de graphisme, la technologie, logiciel Open Source. Parmi mes articles ne sera pas difficile de trouver de la musique, et quelques réflexions personnelles, mais je préfère la ligne directe du blog principalement à la technologie. Pour plus d'informations me contacter.

Commentaires (0) Trackbacks (0)

Aucun commentaire pour l'instant


Laisser un commentaire

Aucun trackbacks pour l'instant