DESARROLLADOR

CSS: agregar texto al botón

Ryan Boudreaux proporciona una forma de agregar texto a los botones a través de CSS en este consejo.

En una publicación anterior, «Agregar elementos de botón a los wireframes», mencioné que el poder de CSS es mayor que la suma de sus partes. ¿No sería bueno hacer algunos fondos de botones y terminar con eso? Es por eso que me gusta crear sectores para los botones de fondo y usar el poder de CSS para mostrar texto. El mismo segmento de fondo del botón se puede usar una y otra vez con solo un código CSS simple. NOTA: Todos los archivos utilizados en este tutorial están disponibles para su descarga.

notas: Para todos los archivos incluidos en este consejo, consulte la descargar Enlace al final de la publicación.

botón de corte de fondo

Usaremos partes de los dos botones para complementar los estilos de fondo que usaremos en nuestro código CSS. Tenga en cuenta que algunas imágenes se han ampliado al 500 % para facilitar la visualización y los detalles.

En el artículo anterior, creé Button_02.psd (consulte el enlace de descarga a continuación); abriremos este archivo en Photoshop y seleccionaremos la herramienta de recorte.Use la herramienta de recorte para seleccionar una sección desde el centro del botón con un ancho de 20 px y la altura total (la altura es de 20 px) como se muestra a continuación Figura A.

Figura A

CSS agregar texto al boton

Luego presione enter y obtendrá un corte con 20px de ancho y 25px de alto como se muestra a continuación Figura B.

LEER  Kanban: los beneficios de usar este marco ágil de PM

Figura B

Guarde el segmento como button_bg_slice.jpg, Luego siga el mismo proceso para el archivo Button_Over_02.psd y guárdelo como button_bg_slice_over.jpg. El botón de resultado se muestra en Figura C y Hombre la siguiente.

CSS y HTML

Ahora que se ha creado la imagen del botón de fondo, pasemos a marcar nuestro código CSS y luego mostrémoslo en un panel de encabezado de navegación simple con algún código HTML. A continuación se muestra el estilo de texto CSS que se muestra en Dreamweaver Figura E:

Figura E

(Click para agrandar.)

El archivo completo styles_text.css se puede encontrar en el enlace de descarga a continuación. Estos son los puntos clave que cubro en Text-Styles CSS:

  1. creo un Estilos de enlace y estilos a:hover con decoraciones de texto y colores.
  2. reiniciar

    Estilo para que los márgenes sean fijos desde el valor predeterminado.

  3. Crear una clase de botón.Tenga en cuenta que se define como «a.button», o en otras palabras, todos Etiquetas con clase = «botón» en HTML. Lo más probable es que haya una segunda clase de botón de entrada en el futuro para que no interactúen sin darse cuenta, razón por la cual no solo define «.button». En la clase de botón, verá relleno, color, una imagen de fondo repetida y una propiedad de altura de línea para tener en cuenta los problemas que algunas implementaciones de IE pueden cortar el botón. También existe el estilo «a.button:hover», que contiene la imagen de fondo del botón.

En el archivo css completo, también notará que agregué los identificadores «ul#navigation» y «ul#navigation li» para que la lista desordenada en el HTML aparezca en línea, y agregué el posicionamiento, los márgenes y relleno. También resolví el encabezado con algo de relleno.

El HTML para la navegación de muestra se vería así Figura F:

Los botones generados en el archivo HTML se muestran en la Figura G:

El archivo HTML ButtonText.html está disponible para su descarga (ver Descargar archivo).

Lo anterior muestra el encabezado de navegación con los botones de servicio al pasar el mouse.

Los botones utilizan un esquema de color de escala de grises simple, un punto de partida, y puede modificar los colores para que se adapten a sus necesidades, junto con CSS.

La belleza de esta técnica es que el botón escalará el ancho en función de la longitud de cualquier texto que agregue en la navegación. Esto elimina la necesidad de crear un botón personalizado para cada texto y elimina la necesidad de volver a crear un nuevo botón de fondo cada vez que el texto pueda cambiar.

LEER  Cómo agregar hipervínculos en documentos de Word

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba