Ejemplo de Botón Con Rollover 1 En CSS

Inicio » CSS » 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.
 

CSS
Autor: Equipo de Redacción ejemplode.com, año 2021

Comentarios

  1. Mil gracias, rápido y fácil, felicitaciones por el blog.
    Por ricardo 2012-05-24 a las 15:24:30
  2. no funciona el estado de presionado
    Por Mario 2011-06-03 a las 23:22:23
  3. muy bueno gracias
    Por jedidias 2010-07-09 a las 17:46:08
  4. Excelente idea, explicaciones sencillas y de interes, los felicito por el sitio, el ejemplo es la mejor forma de aprender.
    Por Diego 2010-06-09 a las 17:07:13
  5. Muy bueno, pero recomiendo como otros visitantes que expusieras los ejemplos, así sería más aclarativo.

    Muchas gracias :D
    Por Carlos Dk 2010-03-18 a las 9:54:54
  6. Funciono a la perfección compañero!!!

    Muchas Gracias
    Por Despedidas de Soltero 2010-03-10 a las 3:42:03
  7. 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 2009-12-10 a las 23:50:45
  8. Me gustaría que coloquen algun ejemplo del boton.
    Por Diseño Web 2009-11-24 a las 21:39:15
  9. gracis, resulta muy util todo esto
    Por javierlog08 2009-09-19 a las 12:21:57
  10. peeeeeeerfecto !!!! funciona de coña ! un millón de gracias !
    Por manu 2009-05-28 a las 23:14:08

Deja un comentario


Acepto la política de privacidad.