Проблема с padding

sergiyko · January 25, 2012

Здравствуйте

Хочу сделать на кнопках, чтобы при нажатии текст в кнопке смещался вниз (типа эффект нажатия). Это я пытаюсь сделать изменением padding`a в псевдоклассе :active. Вот пример кода

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<style type="text/css">
		#buttons {
			font: 12px/1.4 Verdana;
			padding: 20px;
		}
		#buttons input[type="button"] {
        	border: 1px solid green;
        	padding: 5px;
		}
		#buttons input[type="button"]:active {
			padding: 7px 5px 3px;
		}
		</style>
	</head>
	<body>
		<div id="buttons">
        	<input type="button" value="Кнопка 1">
        	<input type="button" value="Кнопка 2">
        	<input type="button" value="Кнопка 3">
		</div>
	</body>
</html>

Здесь при нажатии на происходит увеличение отступа сверху на 2 пикселя и уменьшение снизу на 2 пикселя. С одной кнопкой нормально, но с несколькими кнопками соседние кнопки начинают "прыгать". Можете посмотреть на примере выше. Как сделать, чтобы соседние кнопки "не прыгали"?

Спасибо

Edited January 25, 2012 by sergiyko

0nline · January 26, 2012

Используй не active, a hover.

sergiyko · January 26, 2012

hover при наведении. Мне нужно при клике на кнопку. Да и без разницы, прыгает и при hover.

Edited January 26, 2012 by sergiyko

Gaspode · January 26, 2012

vertical-align: top;

для кнопок

sergiyko · January 26, 2012

Gaspode, то, что надо! Спасибо большое!

sympler · January 27, 2012

можно при наведелии position:relative задавать и смешение куда надо.

Sign In

Проблема с padding

Question

sergiyko

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

0nline

Link to comment

Share on other sites

sergiyko

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

sergiyko

Link to comment

Share on other sites

sympler

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information