Text over the image/button

Question

How to make text over the image/button using html/css.

Eg: I have a button(Login Button). I want the text \"Login\" to be placed over that button. The text should be cen

Answer 1

Try this,

HTML Code:

<input type="submit" value="Login" class="myButton"/>

CSS:

.myButton {
    background-color:#44c767;
    border-radius:28px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
    background-color:#5cbf2a;
}
.myButton:active {
    position:relative;
    top:1px;
}

Answer 2

Here you can find your code

take a look at bootstrap framework as well

http://jsfiddle.net/Lw2nhc26/

<div class="button">
    Button
</div>

.button {
    padding:10px;
    background-color:#000000;
    width 100%;
    color:#FFFFFF;
    text-align: center;
    border-radius:5px;
}