I have a style that wraps around an input
button, so the
button can be styled very creatively. When the
button is hidden in .Net, i would like the style to collapse so it renders like its hidden as well. What the style does, as a result of no value in the
button or its hidden, is it keeps a small shape.
Click to see a demo: http://media.apus.edu/it/evan-testing/button.htm
<style>
.
button {
cursor:pointer;
text-decoration:none;
background:url(button_bg.gif) no-repeat right top;
padding-right:10px;
display:inline-block;
line-height:29px;
height:29px;
font-size:12px;
color:#FFFFFF;
font-weight:bold;
}
span.
button {
vertical-align: middle;
}
.
button span {
background:url(button_bg.gif) no-repeat left top;
padding-left:10px;
line-height:20px;
height:29px;
display:inline-block;
}
.
button span span {
background:transparent;
padding:0;
font-size:12px;
}
.
button span input {
cursor:pointer;
font-weight:bold;
background:transparent;
border:0;
padding-top:.4em;
font-size:12px;
font-family:verdana;
color:#FFFFFF;
}
.button:hover {
background-position:right -39px;
}
.button:hover span {
background-position:left -39px;
}
.button:active {
background-position:right -78px;
}
.button:active span {
background-position:left -78px;
}
</style>
Input
button wrapped in a span with no value:
<span class="
button"><span><input type="
button" value=""></span></span>
<P>
Input
button wrapped in a span with a value:
<span class="
button"><span><input type="
button" value="test"></span></span>
<P>
Span with no data value:
<span class="
button"><span></span>
