IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Réduction de la hauteur d'un bouton


Sujet :

Dimensionnement en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2004
    Messages
    178
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mars 2004
    Messages : 178
    Par défaut Réduction de la hauteur d'un bouton
    Bonjour,

    J'ai trouvé la source (boutons.css) pour un très beau bouton, dont voici le code:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    button.shiny-blue {
      background-color: #759ae9;
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #759ae9), color-stop(50%, #376fe0), color-stop(50%, #1a5ad9), color-stop(100%, #2463de));
      background-image: -webkit-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
      background-image: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
      background-image: -ms-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
      background-image: -o-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
      background-image: linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
      border-top: 1px solid #1f58cc;
      border-right: 1px solid #1b4db3;
      border-bottom: 1px solid #174299;
      border-left: 1px solid #1b4db3;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      -webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
      -moz-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
      box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
      color: #fff;
      font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
      padding: 7px 0;
      text-shadow: 0 -1px 1px #1a5ad9;
      width: 60px;
      }
      button.shiny-blue:hover {
        background-color: #5d89e8;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5d89e8), color-stop(50%, #2261e0), color-stop(50%, #044bd9), color-stop(100%, #0d53de));
        background-image: -webkit-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
        background-image: -moz-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
        background-image: -ms-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
        background-image: -o-linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d5?†???3de 100%);
        background-image: linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
        cursor: pointer; }
      button.shiny-blue:active {
        border-top: 1px solid #1b4db3;
        border-right: 1px solid #174299;
        border-bottom: 1px solid #133780;
        border-left: 1px solid #174299;
        -webkit-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee;
        -moz-box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee;
        box-shadow: inset 0 0 5px 2px #1a47a0, 0 1px 0 #eeeeee; }
    puis dans ma page:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <button class="shiny-blue">
    Texte
    </button>

    J'ai réussi à définir la largeur width mais pour la hauteur si je mets height et un petit nombre ça prend sur le texte.

    merci d'avance pour les réponses!

  2. #2
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    Hello,

    Tu peux jouer sur le padding et la taille du texte pour modifier la hauteur de ton bouton. Par exemple:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    button.shiny-blue {
      font: bold 0.7em "helvetica neue", helvetica, arial, sans-serif;
      padding: 2px 0;
      }
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2004
    Messages
    178
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mars 2004
    Messages : 178
    Par défaut réponse
    Super, merci, le bouton fonctionne aussi avec ie 9?, j'ai pas cette version je peux pas testé !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Décalage d'un pixel en hauteur sur un bouton
    Par jbrasselet dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 14/06/2011, 14h14
  2. Réponses: 4
    Dernier message: 26/08/2009, 18h20
  3. [XL-2003] Boutons réduction fermeture invisible dans barre de titre
    Par altra dans le forum Excel
    Réponses: 6
    Dernier message: 24/07/2009, 10h25
  4. Réponses: 2
    Dernier message: 10/01/2008, 13h52
  5. [HTML]Hauteur d'un bouton
    Par Mat_DZ dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 22/11/2006, 16h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo