Hola amgios , hoy veremos como cambiar el color de un botón INPUT, aplicaremos la llamada de una clase CSS.
Lo que lograremos es cambiar el color de nuestro boton cuando deslicemos el mouse sobre este boton.
Codigo CSS clase:
este codigo deben pegarlo en su hoja de estilos o agregarlo dentro de la etiqueta <head><style>...codigo </style></head>
Codigo HTML del botón:
Codigo completo del archivo HTML
Puedes ver el DEMO AQUI
Mis otros Aportes:
http://www.taringa.net/posts/mac/13926585/FIFA-12-by-EA-SPORTS-Iphone_-ipod_-e-ipad.html
http://www.taringa.net/posts/mac/13925252/Guitar-Hero_-iphone-ipod-e-ipad.html
http://www.taringa.net/posts/mac/13925104/AirMusic-Utilidad-iphone-ipod-e-ipad.html
http://www.taringa.net/posts/mac/13924953/Viendo_-Fake-Video-Calls_-iphone-ipod-e-ipad.html
Lo que lograremos es cambiar el color de nuestro boton cuando deslicemos el mouse sobre este boton.
Codigo CSS clase:
Código: Seleccionar todo
input.login, .button{
margin: 1px;
padding:2px;
font-weight: bold;
cursor:pointer;
background:#91C6F9 repeat;
border:1px solid #000000;
font-family: 'Lucida Grande', Tahoma, Arial, Verdana, sans-serif;
}
input.login:hover, .button:hover{
background:#3ED32E;
color:#000000;
font-weight: bold;
cursor:pointer;
border:1px solid #000000;
font-family: 'Lucida Grande', Tahoma, Arial, Verdana, sans-serif;
}
este codigo deben pegarlo en su hoja de estilos o agregarlo dentro de la etiqueta <head><style>...codigo </style></head>
Codigo HTML del botón:
<input type="button" class="login" value="deslise el mouse y cambia de color" />
Codigo completo del archivo HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Taller de Ejemplos - Wirelan.cl</title>
<style>
input.login, .button{
margin: 1px;
padding:2px;
font-weight: bold;
cursor:pointer;
background:#91C6F9 repeat;
border:1px solid #000000;
font-family: 'Lucida Grande', Tahoma, Arial, Verdana, sans-serif;
}
input.login:hover, .button:hover{
background:#3ED32E;
color:#000000;
font-weight: bold;
cursor:pointer;
border:1px solid #000000;
font-family: 'Lucida Grande', Tahoma, Arial, Verdana, sans-serif;
}
</style>
</head>
<body>
Demostración boton que cambia de color al Pasar por encima:<br/>
Tecnica a utilizar hover con CSS <br/>
<input type="button" class="login" value="deslise el mouse y cambia de color" />
<br/><br/>
<center>Power by Rafthael</center>
</body>
</html>
Puedes ver el DEMO AQUI
Mis otros Aportes:
http://www.taringa.net/posts/mac/13926585/FIFA-12-by-EA-SPORTS-Iphone_-ipod_-e-ipad.html
http://www.taringa.net/posts/mac/13925252/Guitar-Hero_-iphone-ipod-e-ipad.html
http://www.taringa.net/posts/mac/13925104/AirMusic-Utilidad-iphone-ipod-e-ipad.html
http://www.taringa.net/posts/mac/13924953/Viendo_-Fake-Video-Calls_-iphone-ipod-e-ipad.html