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>