how to display input submit like div?

Question

suppose i have input type="submit" and i make the input just like div so my code bellow...,

<style>
.me{width:200px;height:200px;background:green;text-align:center}
img{width:200px;height:50px;}
</style>

<div class="me">
<img src="mywife.png"/>
Emma Watson
</div>

<form action="marry">
<input class="me" type="submit">
<img src="mywife.png"/>
Emma Watson    
</input>
</form>

will make two identical Emma Watson's photos with her name in bottom. And i can click my submit input as normally.

Thanks,

Answer 1

To get exactly the same style, you need to add some extra HTML.

http://jsfiddle.net/e3yT2/1/

HTML:

<button class="me abspos" type="submit">
    <span>
        <img src="mywife.png"/>
        Emma Watson
    </span>
</button>

CSS:

.me {
    width:200px;
    height:200px;
    background:green;
    text-align:center;


    /* I added this */
    padding: 0;
    border-width: 0;
}

/* extra code for vertical alignment */
.me.abspos {
    position: relative;
}
.me.abspos span {
    position: absolute;
    top: 0;
    left: 0;
}