Css bouton portes coulissantes

Question

J'essaie de styler un bouton avec la technique css de "portes coulissantes", mais cela ne fonctionne pas correctement. Pour le moment, je n'ai accès qu'à Firefox 3, de sorte que ce problème ne se produira peut-être pas dans les autres navigateurs, mais j'aimerais le résoudre également pour Firefox.

Voici une photo du problème:

http://img131.imageshack.us/img131/3559/buttons.png

Comme vous pouvez le constater, le second côté est plus bas que le premier d’un pixel et n’est pas assez à droite. Voici le code que j'utilise:

button
{
    font-weight: bold;
    border: none;
    background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
    color: #FFFFFF;
    height: 25px;
}

button span
{
    display: block;
    height: 25px;
    background: top right url(../images/blue_button_right.gif) no-repeat;
    position: relative;
}


<a href="http://localhost"><button class="important" type="button"><span>Register</span></button></a>
<button type="submit"><span>Submit</span></button>

Comment résoudre ce problème? J'ai essayé de positionner relativement la plage en utilisant top: -1px right: -3px mais le texte est mal aligné.

Merci.

Answer 1

Essayez de régler le remplissage du bouton sur zéro, puis de jouer avec les touches de remplissage gauche et largeur pour placer le texte à la bonne place.

button { padding:0; padding-left:5px; width:90px; /* total width:95px */ }
button span { ... }

Si vous regardez l'affichage des blocs HTML: le remplissage est ajouté à la largeur totale de l'objet, l'arrière-plan commence dans la zone de remplissage et la moitié droite est remplie

Toutefois, veuillez noter que les éléments de bouton ne sont PAS adaptés à l'intégration d'autres nœuds à l'intérieur de (tels que span). Ils peuvent fonctionner correctement dans le navigateur, mais Internet Explorer peut vous rendre la vie difficile

Answer 2

http: //www.oscaralexander .com / tutoriels / comment-faire-des-boutons-sexy-avec-css.html

Je viens de faire des portes coulissantes sur un fond de div, et le code de ce site a parfaitement fonctionné.

Answer 3

Les éléments de formulaire, tels que les boutons, sont toujours difficiles à styler et comportent de petits bugs mineurs comme ceux-ci.

Au lieu d’appliquer la classe à l’élément button lui-même, essayez peut-être d’appliquer le style du bouton à un élément span supplémentaire à l’intérieur du bouton actuel?

En bref:

button {
background: white;
border: 0;
}

button div {
    font-weight: bold;
    border: none;
    background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
    color: #FFFFFF;
    height: 25px;
}

button div div {
    height: 25px;
    background: top right url(../images/blue_button_right.gif) no-repeat;
    position: relative;
}

Et HTML:

<button type="submit"><div><div>Submit</div></div></button>

Answer 4

J'utilise des DIV au lieu de boutons et j'ai une fonction pour les construire sur place. Cela finit par ressembler à ceci:

texte de remplacement http://fb.staging.moveable.com/samplebutton.gif

appel de script en ligne:

<script type='text/javascript'>makeButton("Log in","login()")</script>

code:

function makeButton(text,action) {      
    document.writeln("<a class='titleGen' href='javascript:// "+action+"' onclick='"+action+";return false'><div class='btn'><div class='btnLeft'></div><div class='btnMiddle'><div class='btnText'>"+text+"</div></div><div class='btnRight'></div></div></a>")
}

css:

a.titleGen, .btnText, .btnGText {
    text-decoration:none
}
a.titleGen:hover, .btnText:hover, .btnGText:hover {
    text-decoration:none
}

.btn {
    height:22px;
    display:inline;
    cursor:pointer;
    margin-right:5px;
}
.btnLeft {
    background-image:url(/images/bg_btnLeft.gif);
    width:3px;
    height:22px;
    float:left;
}
.btnRight {
    background-image:url(/images/bg_btnRight.gif);
    width:5px;
    height:22px;
    float:left;
}
.btnMiddle {
    background-image:url(/images/bg_btnMiddle.gif);
    width:auto;
    height:22px;
    float:left;
}
.btnText {
    color:#ffffff;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding-top:2px;
    padding-left:10px;
    padding-right:10px;
}