¿Cuál es la mejor y más robusta definición de botón CSS?¿Solución de botón más sólida de solo CSS?
Lo ideal es que me gusten los degradados, las imágenes redondeadas y la degradación elegante hasta IE8. También sería genial si los botones no usaran ninguna imagen y los botones se ajustaran horizontalmente para ajustarse a su contenido.
¿Cuál es la mejor solución para esto?
utilizar las herramientas en http://css-tricks.com/examples/ButtonMaker
No hay forma de hacer lo que pregunta con CSS solamente, ya que los degradados y las esquinas solo se agregaron a partir de CSS3 e incluso ahora todavía no son totalmente compatibles.
La mejor manera de lograr gradientes ahora es utilizar una imagen real, puede estar seguro de que la mayoría de los navegadores, si no todos, lo admitirán (si está utilizando una imagen .png, IE6 puede tener un problema con ella pero hay hacks de CSS para evitarlo).
Las esquinas redondeadas pueden ser añadidos al sitio de dos maneras diferentes:
De los dos métodos anteriores, el primero es preferido si quiere asegurarse de que los usuarios puedan ver las curvas, sin embargo, si no está demasiado preocupado por tenerlos desactivados, definitivamente usaría jQuery como es 100 veces más fácil de usar.
Si va a dejar una respuesta detallada, al menos tenga la gramática, ortografía correcta, etc. –
@FillipPeyton Allí, lo arreglé. ;] – WynandB
Se es posible utilizar gradientes, box-shadow, border-radius, rgba de color etcétera en las versiones anteriores de Internet Explorer, utilizando CSS3 PIE. Mire their demo con todas estas propiedades de CSS3.
Ahora, combine la PIE CSS3 con la button maker mencionada en los comentarios y ¡listo!
ventilador enorme de jQuery UI botones. Demostración es here
Sí, utilizan algunas imágenes ... pero las imágenes también son comunes a las muchas otras características de JQuery UI, que ofrece a su página algunas características sorprendentes (y más vienen todo el tiempo) Lo hace con gracia degradar, y puede extenderlo a ronda en IE a través de otro plugin de JQuery. Mi parte favorita es ThemeRoller, que te permite crear una página usando los complementos compatibles con la herramienta, luego cambiar el estilo o cambiar a voluntad, incluso con una herramienta que flota sobre el sitio. Podría fácilmente incluir una forma para que su usuario cambie todo el tema del sitio con un clic de botón. Además, hay un editor para crear fácilmente tus propios temas si no te gusta lo que hay allí.
En cuanto a degradados, tiene fundidos, desvanecimiento, desvanecimiento curvo, patrones, y luego "construya sus propios" opciones con variaciones de esos y más más superposiciones de color y opacidades.
La creación de un botón es tan fácil como: <button class="ui-state-default ui-corner-all" type="submit">Button</button>
Ha visto http://css-tricks.com/examples/ButtonMaker/? – Adam
Eso es realmente muy bueno. –
No está mal. Y se ven medio decentes en IE8. Sin degradados, sin esquinas redondeadas o lo que no, pero al menos parecen botones. No obstante, no sé ... Creo que todavía prefiero la técnica de puertas correderas. Menos flexibilidad en altura, obviamente porque usa imágenes, pero puedes tener botones realmente extravagantes :) – Strelok