19 апреля 2010, 12:08

CSS3: button

Проскала статья на хабре, а красивой кнопке, сделанной на css3.

Нам нужен html:
<a class="button"><b class="o"><b class="m"><b>Post</b></b></b></a>

И сам css:
a.button {
	text-decoration: none;
	border-color: transparent transparent #ECECEC; /** rgba fallback **/
	border-color: transparent transparent rgba(255, 255, 255, 0.63);
	cursor: pointer;
	outline: none;
}
a.button:hover {
	text-decoration: none;
}
a.button,
a.button b.o,
a.button b.m {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	display: block;
}
a.button b.o {
	border-color: #5A5A5A; /** rgba fallback **/
	border-color: rgba(0, 0, 0, 0.56);
}
a.button b.m {
	background: transparent url(button.png) repeat-x 0 0;
	border-color: #FFF transparent #C7C7C7; /** rgba fallback **/
	border-color: #FFF rgba(255, 255, 255, 0.33) rgba(255, 255, 255, 0.33);
}
a.button:hover b.m {
	background-position: 0 -80px;
}
a.button:active b.m {
	background-position: 0 -160px;
	border-color: #B7B7B7 transparent #D4D4D4; /** rgba fallback **/
	border-color: rgba(255, 255, 255, 0.11) rgba(255, 255, 255, 0.23) rgba(255, 255, 255, 0.27);
}
a.button b.m b {
	display: block;
	font-weight: bold;
	padding: 4px 8px;
	text-shadow: 0 1px 0 #DDD;
	color: #262626;
	/** Make the text unselectable **/
	-moz-user-select: none;
	-webkit-user-select: none;
}



ps: работает только в ФФ3.6 и вебкитах последних ;)

5 комментариев РСС

DeerUA
нужно ещё и от пикчи избавится для полноты ощущений
pepelsbey
Отлично работает в Opera 10.5x, да и вообще делается без экстра-разметки при помощи нескольких box-shadow:inset.

ps: было бы классно, если бы твоя «математическая капча» сохраняла текст комментария, не все с разбегу вспомнят порядок действий.
Vitaliy Bogdanets
Да, я тоже об этом подумал ;)
попробуем исправить %)
Тормоз
Нафиг это всё надо? Чем стандартная кнопка не устраивает?
Vitaliy Bogdanets
ну тем, что инпуты и батон, ведут себя не особо предсказуемо в позиционировании. А так, кастомнные баттоны, одинаковые везде, а сами по себе ссылки.

Заодно можно почитать о превращении инпутов в ссылки
Тормоз
P.S. И ещё не фига не понятно зачем капча + премодерация, если ссылок всё равно нет :) Нелепица какая-то.
Vitaliy Bogdanets
я экспериментировал, спамиры засирают форму, вот я тестировал, с этой «капчей», ещё никто не прошел, таки уберу %)
Тормоз
Позиционирование с точностью до пикселя нужно только дизайнерам, которые так и не смогли освободиться от типографической прошивки. Они подлежат уничтожению, тогда интернет станет лучше :)

Ваш комментарий

адрес не будет опубликован

ХТМЛ не работает


Ctrl + Enter