Tecnología

Inicio

Cómo hacer Vínculos de botones para un sitio web

Cómo hacer Vínculos de botones para un sitio web


Si alguien le pide que esbozar un botón Web sobre el papel, puede dibujar un rectángulo y escribir un texto en su interior. Los navegadores saben para crear botones cuando se agrega etiquetas de botón para documentos HTML. Una manera de darle vida a una página web es cambiar la forma en que aparecen los enlaces. Por ejemplo, si desea un enlace para que parezca un botón estilizada, utilizar CSS para cambiar la apariencia del enlace.

Dar formato a la etiqueta de anclaje

clases CSS crean gran parte de la magia visual que se ve en Internet. Elija el atributo CSS derecha, y se puede hacer cualquier cosa, desde poner un borde de puntos alrededor de un párrafo para añadir una imagen de fondo a un botón. Empezar a personalizar uno de sus etiquetas de anclaje al hacer su código HTML aspecto similar al siguiente:

<a class="linkButton" href="Visit" rel="nofollow" target="_blank"> http: //www.someWebSite.com&quot;> Visita nuestra tienda </a>.

Reemplazar http://www.someWebsite.com con la URL del sitio que desea la gente a visitar cuando hacen clic en el botón de enlace. Cambiar "Visita nuestra tienda" para el texto que desea que su enlace que se vea.

Añadir atributos CSS

Cree la clase linkButton que su etiqueta de anclaje referencias pegando el siguiente código en la sección de estilo de su documento HTML o en una hoja de estilos externa referencias del documento:

.linkButton {display: block; text-align: center; vertical-align: media; padding: 10px; Anchura: 110px; altura: 30px; Border-style: sólido; border-color: blue; color morado; background-color: amarillo; }

Este código establece el estilo de visualización de su vínculo para bloquear, ajusta el texto, establecerá el relleno alrededor de su texto en 10 píxeles y ajusta la anchura y altura del botón. Esos valores son 110 píxeles y 20 píxeles.

Ajustar valores de atributo CSS

Cambie cualquiera de los valores de los atributos en el linkButton para lograr el efecto deseado. El relleno se refiere a la cantidad de espacio entre el texto del enlace y los bordes adyacentes. Aumentar el valor para aumentar el relleno y reducir el valor para reducir el relleno. Los atributos de estilo de frontera y la frontera de color conjunto de estilos borde del botón y color. Otros valores posibles para border-style incluyen punteado, trazos y doble.

Ver el Botón de Enlace

Guardar este documento, verlo en un navegador y verás un botón con un fondo amarillo y púrpura texto. borde del botón es de color azul y sus dimensiones son los valores establecidos para la altura y la anchura. Haga clic en el botón de su navegador y navega a la URL que establezca para el atributo href del enlace.

Trae en los efectos especiales

Al igual que los enlaces regulares, botones de enlace pueden alterar su apariencia cuando se interactúa con ellos. CSS pseudo-clases hacen que sea posible. Añadir los siguientes pseudo-clases a la sección de estilo de su documento HTML:

a: visited {background-color: rosa;}
a: hover {background-color: verde claro;}

a: active {background-color: naranja;}.

La pseudo-clase visitado cambia el color de fondo del botón de enlace a rosa después de que alguien visita el enlace. La pseudo-clase de vuelo estacionario cambia el color de fondo del botón de enlace a verde claro cuando se pasa el ratón sobre el botón. Por último, la pseudo-clase visitado cambia el color de fondo del botón de enlace a actualizar brevemente naranja cuando un visitante hace clic en el botón. Alterar los atributos de estas clases, según sea necesario. Por ejemplo, si desea que el ancho del botón de enlace para cambiar a 200 píxeles y su color de fondo para cambiar a verde claro en un evento de vuelo estacionario, añadir un atributo de anchura a la pseudo-clase de vuelo estacionario, como se muestra aquí:

a: hover {background-color: verde claro; Anchura: 200px;}

Imágenes y Botones de Enlace

Texto del enlace es útil porque le permite saber dónde vínculo cambiará antes de hacer clic en él. En este ejemplo, los visitantes del sitio ver "Visite nuestra tienda" como texto del botón de enlace. Sin embargo, es posible utilizar una imagen como fondo de su botón de enlace. Esa imagen aparecerá detrás del texto normal del botón. Añadir una imagen de fondo a su botón de enlace pegando el siguiente código CSS al final de la clase linkButton:

background: url (IMAGE_URL);
fondo-size: 70px 50px;
background-repeat: no-repeat;

Reemplazar IMAGE_URL con la dirección URL de una imagen en Internet o en el servidor Web. Reemplazar 70 píxeles y 20 píxeles con el ancho y la altura desea que su imagen aparezca. Asegúrese de que la imagen es lo suficientemente pequeño como para caber dentro del botón. También puede utilizar un programa de edición de imágenes, como Microsoft Paint. Paint.Net o Pixlr.com, para dibujar cualquier imagen.

Consejos imagen

El atributo de fondo de tamaño cambia el tamaño de la imagen de acuerdo a los valores establecidos para el fondo de tamaño. Aunque esto funciona, la página Web se carga más rápido si se cambia el tamaño de la imagen utilizando manualmente el programa de edición de imágenes. Consulte la documentación de las aplicaciones de ayuda si necesita ayuda para aprender cómo cambiar el tamaño de una imagen.