Saludos, estoy armando un menu el cual esta hecho con botones (input type="button") y no con enlaces (<a href>) ya que es casi obligatorio para mi el poder habilitar y deshabilitar los botones.
La parte de habilitar y deshabilitar ya la tengo hecha, y pues ahora estoy trabajando en la apariencia, y pues me he topado con que el boton puede estar deshabilitado pero el mouseover siempre funciona, y pues no estoy seguro tampoco si me he salido del standard css, asi que aki les dejo el codigo para que lo vean
HTML Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link href="css/basico.css" rel="stylesheet" type="text/css" />
<script src="recursos/funciones_mbasico.js" language="JavaScript"></script>
<title>Prueba de sistema basico</title>
</head>
<body>
<span class="preload17a"></span>
<span class="preload17b"></span>
<ul class="menu17">
<li><input type="button" id="btn_nuevo" value="Nuevo" class="css_nuevo " ></button></li>
<li><input type="button" id="btn_insertar" value="Insertar" class="css_insertar " disabled></button></li>
<li><input type="button" id="btn_editar" value="Editar" class="css_editar " ></button></li>
<li><input type="button" id="btn_actualizar" value="Actualizar" class="css_actualizar " disabled></button></li>
<li><input type="button" id="btn_borrar" value="Borrar" class="css_borrar " disabled></button></li>
<li><input type="button" id="btn_cancelar" value="Cancelar" class="css_cancelar " ></button></li>
</ul>
</body>
</html>
CSS
Código:
body
{
background-color: #E1E1E1;
}
button
{
text-decoration: none;
}
.css_nuevo
{
color: #4B4B4B;
background: url(../iconos/btn_nuevo.gif) no-repeat;
border: 1px solid #FFFFFF;
padding: 4px;
font-family: Tahoma, Verdana, "Trebuchet MS";
font-size: 11px;
color: #666;
width: 100px;
height: 50px;
text-decoration: none;
}
.css_insertar
{
color: #4B4B4B;
background: url(../iconos/btn_insertar.gif) no-repeat;
border: 1px solid #FFFFFF;
padding: 4px;
font-family: Tahoma, Verdana, "Trebuchet MS";
font-size: 11px;
color: #666;
width: 100px;
height: 50px;
text-decoration: none;
}
.css_editar
{
color: #4B4B4B;
background: url(../iconos/btn_editar.gif) no-repeat;
border: 1px solid #FFFFFF;
padding: 4px;
font-family: Tahoma, Verdana, "Trebuchet MS";
font-size: 11px;
color: #666;
width: 100px;
height: 50px;
text-decoration: none;
}
.css_actualizar
{
color: #4B4B4B;
background: url(../iconos/btn_actualizar.gif) no-repeat;
border: 1px solid #FFFFFF;
padding: 4px;
font-family: Tahoma, Verdana, "Trebuchet MS";
font-size: 11px;
color: #666;
width: 100px;
height: 50px;
text-decoration: none;
}
.css_borrar
{
color: #4B4B4B;
background: url(../iconos/btn_borrar.gif) no-repeat;
border: 1px solid #FFFFFF;
padding: 4px;
font-family: Tahoma, Verdana, "Trebuchet MS";
font-size: 11px;
color: #666;
width: 100px;
height: 50px;
text-decoration: none;
}
.css_cancelar
{
color: #4B4B4B;
background: url(../iconos/btn_cancelar.gif) no-repeat;
border: 1px solid #FFFFFF;
padding: 4px;
font-family: Tahoma, Verdana, "Trebuchet MS";
font-size: 11px;
color: #666;
width: 100px;
height: 50px;
text-decoration: none;
}
.menu17
{
margin: 0 auto;
width: 90%;
text-align: center;
padding:5px;
list-style:none;
height:auto;
position:relative;
font-size:11px;
border:1px;
}
.menu17 li
{
float:left;
margin-right:1px;
}
.menu17 li input
{
display:block;
float:left;
color:#333;
text-decoration:none;
font-family:arial, verdana, sans-serif;
font-weight:bold;
text-align:center;
padding:4px;
border-color: #FFFFFF;
background-color: #A5A5A5;
}
.menu17 li input:focus
{
background-color: #C3C3C3;
}
.menu17 li input:hover
{
background-color: #C3C3C3;
}
la idea es que no lo quiero hacer con JS, y quisiera saber si hay alguna manera de lograrlo solo con CSS, gracias de antemano por la ayuda