Css botón de puertas correderas

Question

Estoy intentando diseñar un botón con la técnica de "puertas correderas" de css, pero no funciona correctamente. Solo tengo acceso a Firefox 3 en este momento, por lo que es posible que este problema no se produzca en otros navegadores, pero también me gustaría resolverlo para Firefox.

Aquí hay una imagen de cuál es el problema:

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

Como puede ver, el segundo lado es más bajo que el primero por píxel y tampoco está lo suficientemente a la derecha. Aquí está el código que estoy usando:

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>

¿Cómo soluciono este problema? Intenté colocar el tramo relativamente usando top: -1px derecha: -3px pero luego el texto está desalineado.

Gracias.

Answer 1

Intente configurar el relleno para el botón a cero, y luego juegue con el relleno-izquierda y ancho para colocar el texto en el lugar correcto.

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

Si observa la pantalla de bloque HTML: el relleno se agrega al ancho total del objeto, y el fondo comienza en el área de relleno, y la mitad derecha se rellena

Sin embargo, tenga en cuenta que los elementos del botón NO son adecuados para incrustar ningún otro nodo dentro (como el intervalo). Pueden funcionar bien en el navegador, pero IE puede hacer que tu vida sea realmente difícil (sin mencionar que, por lo que sé, no es válida)

Answer 2

http: //www.oscaralexander .com / tutorials / how-to-make-sexy-buttons-with-css.html

Acabo de hacer puertas corredizas en un fondo div, y el código de este sitio funcionó perfectamente.

Answer 3

Los elementos de formulario, como los botones, siempre son difíciles de diseñar y están plagados de errores menores como estos.

En lugar de aplicar la clase al elemento del botón en sí, ¿quizás intente aplicar el estilo del botón a un elemento de expansión adicional dentro del botón real?

En resumen:

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

Y HTML:

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

Answer 4

Uso DIV en lugar de botones y tengo una función para construirlos en el lugar. Termina pareciéndose a esto:

texto alternativo http://fb.staging.moveable.com/samplebutton.gif

llamada de script en línea:

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

---

código:

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