Post Top Ad

Your Ad Spot

miércoles, 22 de abril de 2020

Ejemplo de Botón con Rollover 1 en CSS

Rollover 1 CSS

Para este ejemplo debemos tener 3 imágenes las cuales funcionarán como;

Reposo

Sobre

Presionado



Luego en el cuerpo de nuestro sitio tenemos esto

Código:

<span id="bot1">
    <a href="#2">INICIO</a>
</span>


Y asi para todos nuestros botones, después vamos a tener que hacer uso del CSS, iniciamos con este código:
Código:

    #bot1 {
    border: 0 0 0 0;
    padding: 0;
    text-align: center;
    }


Donde le decimos que no queremos margen exterior e interior, alineamos el texto al centro, ahora seguimos con este código:
Código:

    #bot1 a{
    background-image:url(bg_menu_1.jpg);
    background-position: center top;
    height:30px;
    width:100px;
    display: block;
    color: #990000;
    text-decoration: none;
    padding-top: 5px;
    background-repeat: no-repeat;
    font-weight: bold;
    }


Que prácticamente es el que hace todo, veamos línea por línea

background-image:url(bg_menu_1.jpg);
Con esto decimos que queremos una imagen de fondo y damos la ruta de esta

background-position: center top;
Con esto estamos indicando que la posición de la imagen de fondo estará centrada y hacia arriba.

background-repeat: no-repeat;
Para que no repita el fondo como si se tratase de un patrón.

height:30px;
width:100;

Le decimos que la altura será de 30 y ancho de 100px que son las dimensiones de nuestras imágenes de fondo.

display:block;
Para que nos genere y respete un recuadro con las medidas que pusimos antes.

color:#990000
Con esto solo le estamos dando un color al texto que se encuentre dentro de nuestra caja.

text-decoration:none;
Es para evitar la linea que esta debajo de los links.

padding-top:5px;
Para que me guarde un espacio de 5px en l aparte superior de nuestro link y con esto baja la posición al centro de nuestro recuadro.

font-weight: bold;
Hace que las letras estén en negrita


Después solo habrá que agregar clases para los pseudos elementos “hover” y “focus”

    Código:

#bot1 a:hover{
    background-image:url(bg_menu_2.jpg);
    }
    #bot1 a:focus{
    background-image:url(bg_menu_3.jpg);
    }


Pero como nos damos cuenta, solo cambiamos la ruta de nuestras imágenes de fondo para lograr el efecto que buscábamos.

El código de nuestro ejemplo de rollover en css se muestra a continuación:
Código:

<html>
    <head>
        <title>ejemplode.com</title>
    <style type="text/css" >
    #bot1 {
    border: 0 0 0 0;
    padding: 0;
    text-align: center;
    }
 
    #bot1 a{
    background-image:url(bg_menu_1.jpg);
    height:30px;
    width:100px;
    background-position: center top;
    display: block;
    color: #990000;
    text-decoration: none;
    padding-top: 5px;
    background-repeat: no-repeat;
    font-weight: bold;
    }
    #bot1 a:hover{
    background-image:url(bg_menu_2.jpg);
    }
    #bot1 a:focus{
    background-image:url(bg_menu_3.jpg);
    }
    </style>
</head>
<body>
<span id="bot1">
    <a href="#2">INICIO</a>
</span>
</body></html>


Y las imágenes las pueden descargar de esta misma página, mediante clic derecho sobre la imágen y guadar como.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas