Aunque no sé nada de diseño web ni nada por el estilo, quise de todos modos buscar la manera de poner en mi blog botones de esos que cambian de color cuando posamos el cursor sobre ellos (efecto "rollover"). Así fue que, buscando información al respecto, me topé con el siguiente código, el cual utilicé para crear los botones que se ven al inicio. Hay una parte que pegué justo antes de la etiqueta </head> (la que aparece justo antes de <body>)Aquí está esa parte del código:
<title>rollover css e imágenes</title>
<style type='text/css'>
.navenlace {
font-weight: bold;
font-style: italic;
font-size: 75%;
border: 1px solid #999999;
margin:0 0 0 0px;
padding: 2px;
}
.navenlace a {
color: maroon;
text-decoration: none;
display: block;
width: 100%;
height: 20px;
background-image: url(http://farm4.static.flickr.com/3622/3340235525_ea3d58a331.jpg?v=0);
}
.navenlace a:hover {
background-image: url(http://www.archive.org/download/YellowButton/button1over.png);
color: #ffffcc;
}
.navegador{
padding: 1px;
margin-left: 1%;
margin-right: 72%;
width: 275px;
</style>
Y la siguiente sería la parte que va entre las etiquetas <body></body>, donde sea que queramos que aparezcan los botones. Desde ya les digo que no sé cómo hacer para que los botones se distribuyan de manera horizontal.
<div class='navegador'><h2>Con suerte aprenderás a</h2>
<p class='navenlace'><a href='http://uruguay-noma.blogspot.com/2009/02/cualquier-cosa-digamos.html'>quitar la barra de navegación</a></p>
</div>
Con la etiqueta <p> añadimos cada uno de los botones. Obviamente tú le pones el enlace y el texto que se te antoje al botón. Como supongo habrás notado, en el código que va en la cabecera del documento aparecen dos direcciones diferentes. Me refiero a donde dice "background-image: url (http....)". Esas son las direcciones a las dos imágenes diferentes que se verán dentro de tu botón (de ahí el cambio de apariencia cuando posamos el cursor sobre él). También recuerda que puedes modificar el tamaño de los botones cambiando los valores de "height" y "width". En este caso verás que son "height: 20px" y "width: 275px" (no confundir con el otro "width" que dice "100%")
Suscribirse a:
Enviar comentarios (Atom)
No hay comentarios:
Publicar un comentario