Botones web magníficos con un comportamiento adecuado, ¿se puede hacer?

Question

Para mi aplicación, quise darle un estilo agradable a los botones de envío. Con CSS normal, logré que se viera bien en Firefox y horrible en IE. Entonces vi esta entrada de blog:

http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/

Usando esta técnica se obtiene magníficos botones, en casi todos los navegadores. Sin embargo, también hay algunos problemas de accesibilidad:

• Dado que se usa en lugar de enlaces de entrada HTML real o elementos de botón, clic en el botón no enviar el formulario. Esto se resuelve fácilmente usando Javascript, pero sería ideal si el botón de envío funciona sin Javascript habilitado.
• Otro problema es que presionar [ENTRAR] no envía el formulario. Un truco sucio es incluir un elemento de entrada invisible de tipo "enviar" o "imagen".

Básicamente lo que quiero es quizás lo imposible: la calidad del diseño como se ve en la entrada del blog, pero implementado con elementos normales para que tenga un comportamiento normal.

¿De verdad tengo que elegir entre los hacks sucios o el estilo pobre?

Cada botón de estilo tutorial que he visto hasta ahora tiene resultados no óptimos en IE :(

Answer 1

¿Realmente tengo que elegir entre cortes sucios o mal estilo?

No, puede usar Javascript como el resto de nosotros. Cargue en su formulario estándar (completo con el botón de enviar), y luego use Javascript cuidadosamente escrito para "arreglar" dinámicamente algunos de los elementos desagradables. Le sugiero que evalúe el marco de jQuery para este tipo de cosas si desea usar código limpio y obtener compatibilidad con varios navegadores.

Answer 2

Usted puede ser capaz de transportar el botón líquida THINGY usted menciona en una configuración <button type="submit"></button> sustituyendo los <div> s rodean por button elementos, y los <a> s por <span> s.

Answer 3

Puede usar un botón de envío normal y usar JavaScript para cambiarlo por un bonito botón JS-enhanced. De esta manera, sólo se utilizan JavaScript donde se sabe que va a ser apoyado y que no va a dejar a los usuarios NoScript con una página rota

Answer 4

Salida botones de Yui ... parece que se han dado cuenta de esto

http://developer.yahoo.com/yui/examples/button/btn_example01.html

Answer 5

Ver this tutorial. Sin JavaScript, sin enlaces en lugar de botones, funciona en IE6 a través de IE8.

Answer 6

Sí, lo hace.

Excepto que no es un "estilo pobre", es el navegador Chrome. Los elementos de formulario son parte del navegador. 'Diseñarlos' confunde al usuario e impide la usabilidad. En serio, solo déjalos solos.

No importa lo lejos que vayas con el estilo de entrada, inevitablemente golpearás la pared de ladrillos del elemento de carga de archivos, que es casi imposible de diseñar.Y si no puedes diseñarlos a todos, ¿por qué personalizarlos?

En serio, esto es similar al diseño de barras de desplazamiento. No te molestes

Answer 7

Para mi aplicación, quería aplicar los botones de enviar correctamente. Con CSS normal, logré que se viera bien en Firefox y horrible en IE.

para IE es necesario agregar overflow: visible; para deshacerse de relleno "inexplicable". Eso es básicamente todo lo que debes tener en cuenta para IE (siempre que no estés en modo peculiar).

Y vi esta entrada de blog:

no iría por ella. Solo adhiérase a <button type="submit"> o <input type="submit"> con una buena toma de CSS. Incluso puede usar imágenes de fondo CSS en esos botones. No tomaría Javascript para problemas de diseño también, porque eso puede causar "wtf?" experiencias durante la carga de la página cuando el usuario ve instantáneamente partes de la página que cambian rápidamente. Solo usa CSS de manera inteligente.

Answer 8

En realidad, no tiene que usar Javascript o algo similar. Puede usar botones también.

Continuando con http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/ realizar los siguientes cambios:

1. Agregue lo siguiente a la declaración CSS

   botón .btn { float: left; altura: 40px; fondo: url (images/btn_stretch.png) repeat-x left top; línea-altura: 40px; relleno: 0 10px; color: #fff; font-size: 1em; texto-decoración: ninguno; borde: 0; }

2. Añadir lo siguiente al código HTML:

   < div class = "Bot btn_learnmore" > < botón > usted debe darle una oportunidad </botón > <lapso> </span > </div >

Editar: también agrega margen: 0 a la declaración de botón css.

Answer 9

Creo que hay una <input type="image" src="ButtonBg.jpg" />

http://webdesign.about.com/cs/forms/a/aaformsubmit.htm

En realidad nunca he utilizado sin embargo.

Answer 10

¿Has echado un vistazo a los botones impresionantes?

http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

Ellos son bastante impresionantes, se puede aplicar a los enlaces o botones y se ven bien en todos los navegadores que he probado (IE6 tiene algunos pequeños problemas, pero un poco de CSS sólo para las arregla las cosas)

Answer 11

Solo utilizamos CSS para hacer unos botones muy bonitos. Funciona en IE6-8 y Firefox.

input.blueButton 
{ 
    background-image: url(../Images/blueButton.gif); 
    width: 80px; 
    height: 21px; 
    font-family: Arial; 
    font-size: 11px; 
    font-weight: bold; 
    color: White; 
    background-color: Transparent; 
    border-style: none; 
    cursor: pointer; 
    padding-bottom: 1px; 
    margin: 0 3px; 
}