кнопка верстка

[linklee]

<div id="wrapper">
		<a href="#" class="button white">Button text</a>
		
	</div>

есть такой код и css:

a, a:hover {
	text-decoration:none;
}

#wrapper {
	margin:0 auto;
	padding-top:200px;
	width:560px;	
}

.button {
	font-size: 12px;
	font-weight:bold;
	padding: 7px 12px;
	cursor:pointer;
		padding:auto;	

	line-height:5px;
	display:inline-block;
	margin:0 15px 30px 15px;	
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;	
	box-shadow: #e3e3e3 0 1px 1px;	
	-moz-box-shadow:
		0px 1px 1px rgba(000,000,000,0.1),
		inset 0px 1px 1px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		0px 1px 1px rgba(000,000,000,0.1),
		inset 0px 1px 1px rgba(255,255,255,0.7);	
	behavior:url(PIE.htc);				
}
.white:hover {
    background: #ededed; /*fallback for non-CSS3 browsers*/
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#ededed) to(#f9f9f9)); /*old webkit*/
    background: -webkit-linear-gradient(#ededed, #f9f9f9); /*new webkit*/
    background: -moz-linear-gradient(#ededed, #f9f9f9); /*gecko*/
    background: -ms-linear-gradient(#ededed, #f9f9f9); /*IE10*/
    background: -o-linear-gradient(#ededed, #f9f9f9); /*opera 11.10+*/
    background: linear-gradient(#ededed, #f9f9f9); /*future CSS3 browsers*/
    -pie-background: linear-gradient(#ededed, #f9f9f9); /*PIE*/	
}

как сделать чтобы при навелдении на кнопку текст как бы подделывался и вдавливался вниз?
пример взят отсюдаhttp://demo.ourtuts.com/css3-buttons/index.html
вдавливается вниз текст вот здесь:
http://www.sdelaysite.com/sample/easy-button.html

[zilker]

<div id="wrapper">
		<a href="#" class="button white">Button text</a>
		
	</div>
<style>
a, a:hover {
	text-decoration:none;
}

#wrapper {
	margin:0 auto;
/*	padding-top:200px;*/
	width:560px;	
}

.button {
	font-size: 12px;
	font-weight:bold;
	padding: 7px 12px;
	cursor:pointer;
		padding:auto;	

	line-height:5px;
	display:inline-block;
	margin:0 15px 30px 15px;	
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;	
	box-shadow: #e3e3e3 0 1px 1px;	
	-moz-box-shadow:
		0px 1px 1px rgba(000,000,000,0.1),
		inset 0px 1px 1px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		0px 1px 1px rgba(000,000,000,0.1),
		inset 0px 1px 1px rgba(255,255,255,0.7);	
	behavior:url(PIE.htc);				
}
.white:hover {
    background: #ededed; /*fallback for non-CSS3 browsers*/
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#ededed) to(#f9f9f9)); /*old webkit*/
    background: -webkit-linear-gradient(#ededed, #f9f9f9); /*new webkit*/
    background: -moz-linear-gradient(#ededed, #f9f9f9); /*gecko*/
    background: -ms-linear-gradient(#ededed, #f9f9f9); /*IE10*/
    background: -o-linear-gradient(#ededed, #f9f9f9); /*opera 11.10+*/
    background: linear-gradient(#ededed, #f9f9f9); /*future CSS3 browsers*/
    -pie-background: linear-gradient(#ededed, #f9f9f9); /*PIE*/	
}

.button:hover {
    padding-top: 8px;
}

</style>

Так?

[linklee]

вроде бы именно то что нужно!)))
спасибо большое за быстрый и оперативный ответ я прямо не перестаю удивляться насколько удобный быстрый форум=)

[linklee]

a еще вопрос как border-color указать?ъ
border-color:blackче то не работает

[zilker]

border: 1px solid black;
border-color прокатил бы, если у вас уже были указаны параметры для границы. А просто указывая border-color:black; браузер не знает, какой толщиной и стилем делать границу.

[linklee]

все понял да...
и еще вопрос остался
button:hover {
padding-top: 8px;
}
когда пишем так получается все кнопки на страничке сдвигаются
при нажатии на одну
а когда пишем
.white:hover{
padding-top:8px ;
}
получаем то же самое что не только белая кнопка сдвигается
ну и вопрос первый почему так.
и второй как сделать так чтобы одна только сдвигалась

[linklee]

и вот сейчас получается что кнопка как бы уходит вниз...а как сделать чтобы она продавливалась вглубь?
Upd: нашел часть ответа просто делаем padding-bottom: 6 px