Button like a link
This model was built for testing purposes. Hyperlinks like a breadcrumb or a progress bar or a navigation menu... Later on worked for submitting forms, one on each page. The thing works under FireFox, IE7 and IE6.
SAMPLE
on page 2 -
on page 3 -
on page 4 -
CSS
body{
behavior:url(ie-hover.htc);
}
input{
background:none;
border:none;
color:#84b7ca;
cursor:pointer;
font-size:11px;
overflow:visible;/*to strip down generous empty spaces on sides of a button under IE family*/
padding:0 3px;
}
.step-1:hover input,
.step-2:hover input,
.step-3:hover input,
.step-4:hover input{
color:#84b7ca;
border-bottom:1px solid #84b7ca;/*text-decoration doesn't work under FireFox, border-bottom is universal but requires margin:-1px for IE then*/
*margin:-1px;
}
.current{
color:#000;
}
.blocked{
color:#aaa;
}
.step-1:hover input.blocked,
.step-2:hover input.blocked,
.step-3:hover input.blocked,
.step-4:hover input.blocked{
color:#aaa;
cursor:auto;
border-bottom:1px solid #fff;
}
MARKUP, a fragment
<span class="step-4"> <input class="blocked" disabled="disabled" name="_target3" title="Step 4" type="submit" value="[Step 4]" /> </span>
2009
Web Development - XHTML CSS JavaScript jQuery.