Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to position the text inside a button? [closed]

Tags:

html

css

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: enter image description here

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

like image 312
kspacja Avatar asked Oct 18 '25 10:10

kspacja


1 Answers

Set the padding-bottom.

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

The demo.

like image 59
xdazz Avatar answered Oct 20 '25 23:10

xdazz