[Помогите] Простая мелочь с кнопками (css)

Надо сделать что бы кнопки были одной ширины независимо от текста, да может я не правильно начал делать кнопки через украшения ссылок просто тоесть у меня html имеет вид: <a class="new_botton" href=итд....>, но я думаю и при такой реализации можно сделать одной шириной. Пробовал width не работает) Помогите реализовать... Песочница: http://jsfiddle.net/gTb84/

css:

Код:

.new_botton {
  color: #000000;
  text-decoration: none;
  background-color: #97C3FC;
  padding: 7px 30px;
  border: 1px solid #7E7676;
  -webkit-border-radius: 2px; -moz-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px;
  line-height: 24px;
  text-shadow: #A5A5A5 0px 1px 0px;
}
.new_botton:hover {
  background: #8B9DFA;
}

​

 

может так
<div class="new_botton"><a href="#">Тест</a></div>
<div class="new_botton"><a href="#">ТестМногомного</a></div>





.new_botton {
width:200px;
color: #000000;
text-decoration: none;
background-color: #97C3FC;
padding: 7px 30px;
border: 1px solid #7E7676;
-webkit-border-radius: 2px; -moz-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px;
line-height: 24px;
text-shadow: #A5A5A5 0px 1px 0px;
}
.new_botton:hover {
background: #8B9DFA;
}

--- Добавлено, 17 окт 2013 ---

или так
<a class="new_botton" href="#">Тест</a>
<a class="new_botton" href="#">ТестМногомного</a>


.new_botton {
display:block;
width:200px;
color: #000000;
text-decoration: none;
background-color: #97C3FC;
padding: 7px 30px;
border: 1px solid #7E7676;
-webkit-border-radius: 2px; -moz-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px;
line-height: 24px;
text-shadow: #A5A5A5 0px 1px 0px;
}
.new_botton:hover {
background: #8B9DFA;
}

 

width работает только для блочных элементов, если это <a> тэг, надо его переопределить в стиле как блочный, тобишь a.button {display:block;}

 

http://jsfiddle.net/gTb84/31/

Не знаю, помогу или нет, но вроде и так уже навели на правильный путь.

 

width прекрасно работает с display: inline-block; Это решает проблему