making a span behave like a button

Question

I have the following html

<div class="btns">

<div id="green">    <span class="btn btn-block btn-large btn-success disabled green_btn">Green</span>

 <div class="num">(1)</div>
</div>
<div id="red">
    <form class="button_to" >
        <div>
            <input class="btn btn-block btn-large btn-danger red_btn"
            type="submit" value="Red">
        </div>
    </form>
    <div class="num">(0)</div>
</div>
</div>

and css

.btns {
    position: relative;
}

.num {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

#green, #red {
    display: inline-block;
    width: 49%;
    position: relative;
}

.green_btn, .red_btn {
    margin-bottom: 4px;
}

I can't figure out why the (1) under green span isn't behaving like (0) under the red button. If I remove bottom:0; it fixes the green but messes up red.

Here is a jsfiddle to illustrate the problem http://jsfiddle.net/HajHV/

What am I missing here?

Answer 1

Twitter Bootstrap (which you are using) adds some bottom margin to the the <form> element.

Try this to normalize the two buttons:

.button_to { margin-bottom:0; } /* Target the <form> in the red button */

Demo: http://jsfiddle.net/HajHV/3/

Answer 2

try this

.btn
{
    background-color: rgb(7, 55, 99);
    color: white;
    border: none;
    cursor: pointer;
    padding: 2px 12px 3px 12px;
    text-decoration: none;

}

HTML

<span class="btn">Submit</span>

after removing the output output is