Web Sugerencia: Crear un reutilizables "Botón" Clase

Páginas web están llenos de botones. De navegación, links, "Next" botones "enviar" botones "Aceptar" botones "cerrar" botones ... y la lista continúa. Cuando vaya a diseñar una nueva página web, es probable que la va a tener un montón de botones. Facilitar la vida a ti mismo mediante la creación de una clase de botón que se puede reutilizar una y otra vez en el código HTML cada vez que necesite un botón.

Esto no sólo es un favor a usted, pero es bueno para los usuarios y la estética también. La consistencia es un factor clave en la usabilidad. Vamos a empezar.

Fondo degradado para el Botón

Mantener las cosas simples es la clave aquí. Definitivamente, queremos mantener a nuestros botones de texto. Esta es una necesidad para la accesibilidad, usabilidad y extensibilidad. Una manera de hacer esto, pero aún hacen nuestros botones se ve muy bien y visualmente distinto es dándoles un fondo del gradiente de Niza.

Este gradiente de fondo se repita horizontal, de modo que los botones pueden ser tan largo o más corto que lo necesitamos, y no estar limitado por las dimensiones de la gráfica. Vamos a crear el gradiente en Photoshop. Crear un documento de 20px de ancho por 75px nueva altura. Esta gráfica puede ser tan fina como 1px ya que sólo va a repetir en horizontal, pero vamos a dejarlo en 20px para que podamos ver lo que estamos haciendo. La diferencia de tamaño de archivo es insignificante de todas formas.

Rellene el documento con cualquier color. No importa que, estaremos cubriendo con una capa de estilo de todos modos. Tiene que ser llenado sin embargo, para el estilo de la capa de tener algo para estar en la cima de.

Ahora haga doble clic en esa capa en la paleta de capas (Ventana> Layer) para mostrar los estilos de capa. Haga clic en el estilo de la superposición de degradado. Por defecto, usted debe tener un derecho para arriba y abajo del gradiente de blanco a negro. Esto es bueno, haga clic en la vista previa de degradado y alterar los colores a algo más adecuado para tu estilo de botón de diseño. En este caso, algunos rojos, agradable saturadas hará:

Guardar a cabo su documento (por extraño que parezca, PNG-24 es a menudo la mejor predefinidos para imágenes como esta. Calidad más alto, el tamaño mínimo de archivo). Uso de una convención de nomenclatura inteligente como "botón-bg.png". Asegúrese de guardar el PSD para esto, quién sabe cuando es posible que desee saltar allí y alterar los colores, la posición de la pendiente, o cualquier otro detalle sutil.

CSS para el Botón

Ahora tendremos que establecer algún CSS para nuestra clase botón genérico que se utiliza este nuevo fondo. Vamos a utilizar una clase. "Botón". Simple, evidente, y genéricos. Ese es el código inteligente. No queremos hacer nada que pueda específicos como "mainContent # # nav li a.button", porque el objetivo de esto es que la clase es genérica y reseable en cualquier lugar de la página.

Así es cómo me gustaría crear esta clase:

.button { background: url(images/button-bg.png) repeat-x top center #650606; border: 1px solid white; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px 8px; color: white; font-weight: bold; font-size: 12px; text-align: center; } .button:hover { background: white; border: 1px solid red; color: black; } 

Vaya que es un poco de un bocado para una declaración CSS ¿eh? Cada pedacito de la que es importante sin embargo. Vamos a través de cada atributo.

• Antecedentes: aquí es donde se aplica el gradiente de la imagen que hemos creado. Observe el "top" entorno, que mantiene alineadas verticalmente a la parte superior del botón y que la imagen se repite en horizontal, "repeat-x". Observe también hay un código hexadecimal declarado para el color de fondo. Este valor se establece en el mismo color que el fondo de la imagen de gradiente. Sólo en caso de este botón crece más alto de la imagen, el color será muy bien continuó.
• Borde: un borde blanco de un solo píxel se aplica aquí. Si nuestro botón en blanco, esto será invisible, pero como quiero usar un borde de color en el estado hover, el Estado tendrá que regular una frontera también. De lo contrario, habrá un ligero "salto" en hover que no es deseable. Los siguientes dos estilos son para redondear las esquinas en el botón. La primera es específica para navegadores basados en Mozilla (Firefox, Flock ...), el segundo es específico para los navegadores basados en Webkit (Safari, Konqueror ...). Otros navegadores (IE), no verá la esquina redondeada, pero sin daño no hay castigo.
• Padding: Esto es vital para mantener el texto de los bordes del botón. Da en el botón de algún cuerpo. Hace que el botón más gusta y más fácil de hacer clic.
• Color: El fondo es un color rojo oscuro, así que para el programa de texto hasta, el blanco es bueno. Sólo en caso de imágenes están desactivados en un navegador, el fondo de nuestro botón seguirá siendo de color rojo oscuro, porque nos propusimos que en el botón, así, tan blanco aquí es perfectamente seguro.
• Font-size/weight/text-align: auto Bastante explicativo aquí. Normalmente yo no podría tamaño del texto en los valores de PX, pero en el caso de un botón, haciendo que el próximo no podrá cambiar el tamaño-en IE 6 podría ser ideal para la consistencia.
• Hover: Esto es lo que es necesario para hacer nuestro botón en realidad siento como un botón. Botones de hacer algo cuando se dio la vuelta. Nuestro instantáneamente cambiar a un fondo blanco con el texto en negro y con un borde rojo. Muy dura, muy evidentemente, un botón.

Cómo usar nuestro botón en el Código

Debido a que nuestra clase es tan genérica, se puede usar en cualquier lugar!

Hipervínculo ol regular ':

 <a href="/home" class="button">Go Back Home</a> 

Realmente enlace largo:

 <a href="/contact" class="button">Visit The General Contact Form Page</a> 

Botón de envío:

 <input type="submit" class="button">Submit</input>