28172 sujets

CSS et mise en forme, CSS3

[Résolu] Bouton personnalisé : quelle est la meilleure façon de faire?

Bonjour et bonne année
j'ai personnalisé un bouton avec 2 méthodes différentes. A priori le résultat est le même.
Selon vous quelle est la meilleure façon de faire?? Il m'a semblé avoir lu que la propriété vertical-align est à proscrire mais je ne retrouve pas la raison
Html
<div class="boitbouton bouton"><p><a href="...">Continuer</a></p></div>
<div class="boitbouton"><button><a href="...">Continuer</a></button></div>
Css
BUTTON {
width:102px;
height:23px;
background: -moz-linear-gradient(top,
#FFFFFF 0%,
#E6E6E6 24%,
#E6E6E6 74%,
#FFFFFF 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#FFFFFF),
color-stop(24%,#E6E6E6),
color-stop(74%,#E6E6E6),
color-stop(100%,#FFFFFF)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,
#FFFFFF 0%,
#E6E6E6 24%,
#E6E6E6 74%,
#FFFFFF 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,
#FFFFFF 0%,
#E6E6E6 24%,
#E6E6E6 74%,
#FFFFFF 100%); /* Opera 11.10+ */
background: linear-gradient(
#FFFFFF 0%,
#E6E6E6 24%,
#E6E6E6 74%,
#FFFFFF 100%); /* W3C */
border-width: 1px;
border-style: solid;
border-color: grey;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
BUTTON a {
vertical-align:center;
text-align:center;
font-weight : bold;
font-family: Arial Narrow;
font-size: 16px;
text-decoration:none;
}

.bouton a {
display:block;
width:102px;
height:23px;
line-height:23px;
text-align:center;
background: -moz-linear-gradient(top,
#FFFFFF 0%,
#E6E6E6 24%,
#E6E6E6 74%,
#FFFFFF 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#FFFFFF),
color-stop(24%,#E6E6E6),
color-stop(74%,#E6E6E6),
color-stop(100%,#FFFFFF)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,
#FFFFFF 0%,
#E6E6E6 24%,
#E6E6E6 74%,
#FFFFFF 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,
#FFFFFF 0%,
#E6E6E6 24%,
#E6E6E6 74%,
#FFFFFF 100%); /* Opera 11.10+ */
background: linear-gradient(
#FFFFFF 0%,
#E6E6E6 24%,
#E6E6E6 74%,
#FFFFFF 100%); /* W3C */
font-weight : bold;
font-family: Arial Narrow;
font-size: 16px;
text-decoration:none;
border-width: 1px;
border-style: solid;
border-color: grey;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

A+
et faire disparaitre la balise <a> et conserver la balise <button> hors formulaire c'est possible?
button hors formulaire va demander un peu de javascript pour qu'il y est une utilité.

dans la bidouille tu peut faire : 
<form action="http://google.com">
  <button type="submit">buton</button>
</form>

en restylant form en inline si besoin ... enfin bon, ton bouton à plutôt l'air d'un lien qu'autre chose. Si tu veut que cela ressemble plutôt a un bouton, CSS est justement là pour ça .

Mon humble avis: ceci est un lien, sert toi d'un lien Smiley cligne
Administrateur
Bonne année également Smiley smile

jean202 a écrit :
Il m'a semblé avoir lu que la propriété vertical-align est à proscrire mais je ne retrouve pas la raison

Perso je ne l'utilise pas dans les button parce que Firefox ignore cette propriété... Hauteur et centrage vertical sont ajustés uniquement avec le padding, après avoir fixé une taille de texte et un interlignage.
Sujet clos
Aller à