Неправильная кнопка с изображением CSS

Question

Перейти этот тег:

<a href="javascript:{}" onclick="document.getElementById('_paypal').submit(); return false;"><span id="order_now_btn">Order Now</span></a>

Вот CSS:

#order_now_btn {
  background: transparent url("../images/order_now_btn.gif") 0 0px no-repeat;
  height: 33px;
  width: 111px;
  display: block;
  font-family:Verdana, Arial, Helvetica, sans-serif; 
  font-size:12px;
  font-weight: bold;
  cursor:pointer;
  color: #fff;
}

Проблема в том, что я не могу разместить текст в нужном месте ...

Вот изображение кнопки:

Есть ли лучший способ сделать это? У меня есть немало таких дел.

Answer 1

Я решил пойти с тегом кнопки, это прекрасно работает.

<button type="submit" id="order_now_btn" width="111" height="33" align="absmiddle" alt="Order Now" /><span>Order Now</span></button>

#order_now_btn {
  color: #fff;
  background: transparent url("../images/order_now_btn.gif") 0 0px no-repeat;
  border: 0;
  height: 33px;
  width: 111px;
  font-size:12px;
  font-weight: bold;
  cursor:pointer;
  font-family:Verdana, Arial, Helvetica, sans-serif; 
}

#order_now_btn span {
  position: relative;
  left: 12px;
}

Answer 2

Вы должны расположить текст над изображением.

Проверьте это

http://www.the -art-of-web.com / css / textoverimage /

http://frinity.blogspot.com/2008/06/placing-text-over-image-using-css.html

Answer 3

просто добавьте padding-left:30px; и padding-top:10px; в #order_now_btn. Это поместит ваш текст в правильное место.

Answer 4

Просто нужно добавить некоторые отступы:

padding:10px 0 0 30px;

http://jsfiddle.net/6fX5v/