Agrandar botones al pasar el cursor

roman · #4 07-10-2010

Hay muchos efectos que puedes lograr sin necesidad de javascript. El aspecto de un elemento en tu página está controlado por CSS y éste cuenta con una pseudo propiedad hover que sirve para dar el estilo deseado precisamente cuando el ratón está sobre el elemento.

Aquí un ejemplo muy sencillo:

Código:

<!DOCTYPE HTML>
<html>
<head>
<title> Botón </title>
<meta http-equiv='content-type' content='text/html; charset=iso-8859-1'>
<style type='text/css'>
.boton {
    cursor: hand;
    background-color: #336600;
    font: .9em sans-serif;
    color: #FFFFFF;
    width: 100px;
    height: 30px;
    border: 1px solid silver;
    text-align: center;
    line-height: 30px;
}

.boton:hover {
    width: 105px;
    height: 35px;
    line-height: 35px;
    color: #B7FF22;
}
</style>
</head>

<body>
<div class='boton'>
Aprieta
</div>
</body>
</html>

// Saludos

Herramientas	Buscar en Tema
Mostrar Versión Imprimible Enviar por Correo	Buscar en Tema: Búsqueda Avanzada
Desplegado
Cambiar a Modo Lineal Cambiar a Modo Hibrido Modo Hilado

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
Pasar palabra bajo cursor en un programa a aplicación Delphi	Q37	API de Windows	7	13-01-2007 14:36:06
Fuentes para negrillas y agrandar las letras	Jorge Taveras	Impresión	2	16-04-2005 22:47:31
Cursor	subzero	Firebird e Interbase	1	21-02-2005 20:08:42
agrandar fuente en ticket	perico	Impresión	8	04-02-2005 02:55:29
Cursor	fmonte	Varios	2	26-08-2004 00:51:46