Question

I use an untypical image background inside a button. I need to make this text appear “higher” inside the button than the default (which is vertically centered). What I have to do?

CSS:

.button {
   width: 211px;
   height: 66px;

   font-family: Arial, Helvetica, sans-serif;
   font-size: 18px;
   text-transform: uppercase;
   color: white;

   background: url('../img/button.png') no-repeat;
   border: none;
   cursor: pointer;
}

HTML:

<input type="submit" class="button" value="Submit"/>
(...)
<button class="button">Get a quote</button>

Screen from browser:

As you can see texts in buttons should be little bit higher then it is now

Answer 1

Set the padding-bottom.

button{
      width: 300px;
      height: 300px;
      padding-bottom: 200px;
}

The demo.