Показать сообщение отдельно
  #1 (permalink)  
Старый 28.07.2013, 22:04
Аспирант
Отправить личное сообщение для linklee Посмотреть профиль Найти все сообщения от linklee
 
Регистрация: 15.07.2013
Сообщений: 49

кнопка верстка
<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

Последний раз редактировалось linklee, 28.07.2013 в 22:14.
Ответить с цитированием