Ejemplo de Botón con Rollover 1 en CSS

Inicio » CSS » Botón con Rollover 1 en CSS
Autor: Redacción Ejemplode.com.

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.
 

Citado APA: (A. 2008,04. Ejemplo de Botón con Rollover 1 en CSS. Revista Ejemplode.com. Obtenido 04, 2008, de https://www.ejemplode.com/18-css/68-ejemplo_de_boton_con_rollover_1_en_css.html)

CSS

Búsqueda:

Comentarios:

  1. Mil gracias, rápido y fácil, felicitaciones por el blog.
    Por ricardo 05.24.12 a las 15:24:30
    1. muchas gracias, tu ejemplo me sirvio de mucho :)
      Por maseo 01.03.12 a las 4:24:54
      1. no funciona el estado de presionado
        Por Mario 06.03.11 a las 23:22:23
        1. muy bueno gracias
          Por jedidias 07.09.10 a las 17:46:08
          1. Excelente idea, explicaciones sencillas y de interes, los felicito por el sitio, el ejemplo es la mejor forma de aprender.
            Por Diego 06.09.10 a las 17:07:13
            1. Muy bueno, pero recomiendo como otros visitantes que expusieras los ejemplos, así sería más aclarativo.

              Muchas gracias :D
              Por Carlos Dk 03.18.10 a las 9:54:54
              1. Funciono a la perfección compañero!!!

                Muchas Gracias
                Por Despedidas de Soltero 03.10.10 a las 3:42:03
                1. Les hago una consulta....existe algun tipo de metodo para que todos los exploradores lean el sitio de la misma manera?
                  Por Diseño Web 12.10.09 a las 23:50:45
                  1. Me gustaría que coloquen algun ejemplo del boton.
                    Por Diseño Web 11.24.09 a las 21:39:15
                    1. gracis, resulta muy util todo esto
                      Por javierlog08 09.19.09 a las 12:21:57
                      1. peeeeeeerfecto !!!! funciona de coña ! un millón de gracias !
                        Por manu 05.28.09 a las 23:14:08
                        1. muy bueno gracias
                          Por camilo 10.22.08 a las 21:32:35
                          1. Falta el ejemplo funcionando, aunque nos lo imaginamos, pero sin eso no termina de cuajar.
                            Por Iñigo 06.27.08 a las 10:35:01
                            1. me interesa mucho poder hacer este tipo de bortones, por ierto seria bueno que pusieras el ejemplo paractico
                              Por fatima 06.03.08 a las 9:52:47

                              Deja un comentario


                              Acepto la política de privacidad.