Красивые CSS кнопки

Great Rash · August 13, 2010

Давно (года полтора назад) натыкался на статью о том как создаются кнопки для сервисов гугля. Статью уже не найду, но те кнопки очень понравились и захотелось их повторить. Вот что вышло:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html {
			font-size: 100.1%;
		}

		body {
			margin: 10px;
			font: 62.5% Arial, Tahoma, Verdana, sans-serif;
		}

		.button {
			overflow: hidden;
			display: -moz-inline-stack;
			display: inline-block;
			padding: 0 1px;
			font-size: 1.4em;
			text-decoration: none;
			color: #767676;
			cursor: pointer;
		}

		.button .button-cont {
			display: block;
			border-top: #9d9d9d 1px solid;
			border-bottom: #9d9d9d 1px solid;
		}

		.button .button-side {
			position: relative;
			display: block;
			margin: 0 -1px;
			padding: 2px 5px;
			border-left: #9d9d9d 1px solid;
			border-right: #9d9d9d 1px solid;
			background: #c9c9c9 url('http://www.imageup.ru/img45/button_light404787.png') 0 0 repeat-x;
		}

		.button .center {
			text-align: center;
		}

		.button:hover {
			color: #2a86c8;
		}

		.button:hover .button-cont,
		.button:hover .button-side {
			border-color: #619dc8;
		}

		.button:hover .button-side {
			background-color: #9ec9e2;
		}

		.green-but {
			color: #3f8f3f;
		}

		.green-but .button-cont,
		.green-but .button-side {
			border-color: #78ba78;
		}

		.green-but .button-side {
			background-color: #b0dbb0;
		}
	</style>

	<!--[if lt IE 8]>
		<style type="text/css">
			.button {
				display: inline;
				zoom: 1;
			}

			.button .button-side {
				display: inline;
				position: relative;
				left: -1px;
				zoom: 1;
			}
		</style>
	<![endif]-->

	<!--[if IE 6]>
		<style type="text/css">
			.button .button-side {
				filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src='http://www.imageup.ru/img45/button_light404787.png');
				background-image: none;
			}
		</style>
	<![endif]-->
</head>

<body>
	<a href="java script: void(0);" class="button">
		<span class="button-cont">
			<span class="button-side">
				Кнопка
			</span>
		</span>
	</a><br /><br />

	<a href="java script: void(0);" class="button green-but">
		<span class="button-cont">
			<span class="button-side">
				Зеленая кнопка
			</span>
		</span>
	</a><br /><br />

	<a href="java script: void(0);" class="button">
		<span class="button-cont">
			<span class="button-side">
				Очень длинная кнопка
			</span>
		</span>
	</a><br /><br />

	<a href="java script: void(0);" class="button">
		<span class="button-cont">
			<span class="button-side center">
				Кнопка с переносом на<br />
				другую строку
			</span>
		</span>
	</a><br /><br />

	<a href="java script: void(0);" class="button green-but">
		<span class="button-cont">
			<span class="button-side">
				Еще одна длинная зеленая кнопка
			</span>
		</span>
	</a>

</body>
</html>

Проверял в браузерах:

IETester в режиме IE6

IE8

IE8 в режиме IE7

Google Chrome самый свежий

Opera 10.6

Apple Safari самый свежий

Mozila Firefox 3.6.7

Используется однопиксельная картинка PNG24 для градиента.

Цвет фона можно менять через CSS.

Багов замечено не было. Надеюсь пригодится.

mishka · August 13, 2010

Супер, как всегда радуешь интересными решениями.

psywalker · August 13, 2010

Я давно уже говорил, этому парню нет равных в своём амплуа.

Ялекс · August 14, 2010

Попробовал заменить тег <a> на <button> + добаил в класс .button св-во border:none. Вроде бы работает - проверяйте.

Иногда необходимо использовать именно тег <button>. Вообще спасибо - нормальные кнопочки.

Edited August 14, 2010 by Ялекс

Great Rash · August 16, 2010

Иногда необходимо использовать именно тег <button>

Не понял почему? В форме сабмит можно реализовать скриптом, тег <a> фокус по табу получает, где может понадобится именно <button>?

Ялекс · August 16, 2010

В форме сабмит можно реализовать скриптом

А ведь можно легко обойтись и без скрипта...

Great Rash · August 16, 2010

Ну если только для этого, тогда да, <button> пригодится. Только кнопка уж слишком по разному ведет себя в разных браузерах, особенно отступы слева и справа - в ИЕ они громадные.

mishka · August 17, 2010

Только кнопка уж слишком по разному ведет себя в разных браузерах, особенно отступы слева и справа - в ИЕ они громадные.

Лечится - overflow:visible на кнопку. Пусть и не пиксель в пиксель, но всеже почти одинаково.

Sign In

Красивые CSS кнопки

Recommended Posts

Great Rash

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Ялекс

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Ялекс

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

Обсуждения

Forums

Important Information