Замечательная технология CSS3 позволяет в ряде случаев при оформлении сайта отказаться от использования изображений, которые заменяет чистый CSS-код. К примеру, подобным образом можно поступить с какими-либо кнопками, используемыми на сайте. Есть один замечательный дизайнерский англоязычный блог PremiumPixels.com, автор которого бесплатно делится красивыми элементами интерфейса для ...
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала необходимо приготовить ...
Продолжаю делиться версткой элементов интерфейса для сайтов. Как и в своей предыдущей статье, я взял интересный пример с сайта PremiumPixels.com и сверстал его, используя CSS3. На этот раз это форма авторизации. В дизайне этой формы используются приятные ...
Чем привлекательны CSS — тем, что они часто, при создании тех или иных эффектов, позволяют заменить JavaScript. Вот и на этот раз каскадные таблицы стилей помогут нам сконструировать красивые динамические кнопочки. Информацию, изложенную ...
Вольный перевод статьи «Creating bulletproof graphic link buttons with CSS» (мои комментарии — курсивом). Проблема в CSS, с которой я боролся в последнее время, — как создать универсальную графическую кнопку. Имеется в виду кнопка с использованием изображения, которая ...
Комментарии (56)
Сенькс, поставил себе. Только убрал пиксельный размер шрифта
Спасибо! Классные кнопки получились. Возможно тоже у себя на блоге попробую поставить на комменты.
Димокс, обалденно.
Немедленно организую у себя.
Ты прекрасен :)
Отлично! приделаю себе… Спасибо большое
Слушай, ты упомянул здесь свой скрипт для цитирования: не поделишься ли? (там каменты, как я понимаю, отключены) Очень хочется.
Там очень сложно объяснять, поэтому не планирую об этом писать.
Спасибо за кнопочки!
Заюзал у себя на сайте!
Результат понравился, возьму на заметку при обновлении дизайна.
Единственное, можно было бы в самой статье хотя-бы один пример действующей кнопки (для большей наглядности). В действии результат заметно эффектнее, чем на картинке в начале.
Спасибо!
Дима, забыл написать, что эти кнопки помимо всего прочего можно тянуть как угодно, в отличии от картинок))
В принципе да, хотя это не такой уж и существенный момент, для меня по крайней мере.
Тянуть в смысле кнопка растягивается на текст какой угодно длины? А я как раз пришла спросить, почему она у меня не тянется, а выстраивает текст в два ряда.
Ага. у них фиксированная ширина. Поняла, что к чему.
Чисто теоретически: а низзя так, шобы кнопка сама автоматом сжималась/растягивалась в зависимости от длины текста на ей? :)
Можно конечно. Для этого нужно:
1) Удалить:
2) Добавить:
3) Поменять:
на:
Вах! Спасибо!!!
От теперь полный порядок :)
Дима, не совсем понял, зачем прописывали свойство
???
Хм, действительно, оно ведь здесь совсем не нужно. Браузер назначает его по умолчанию. Спасибо, что заметили =)
То есть этот параметр можно убрать?
Да. Но он будет нужен, если вы захотите, например, кнопку сделать из ссылки,т. е. тег
<a>вместо<button>.Ага. спасибо. Тогда не буду трогать, поскольку именно что буду юзать код ссылки, а не кнопки.
Хотя. сейчас юзаю такой код:
а для него — нужен inline-block?
Не нужен.
Для разных элементов применяются разные значения Display.
Есть блочные элементы (p, div, h1-h6), которые по умолчанию имеют вид блока (display:block;) —т. е. растягиваются на всю ширину блока в котором они находятся.
При этом, то что находится после этого элемента, переносится на новую строку.
Есть элементы, которые не растягиваются (а, span, b, i, u, s) — ими можно выделять определенные участки блочных элементов. Вот как сейчас я выделяю жирным и курсивом названия этих тегов и правил CSS.
По умолчанию значения их свойства display: inline;
И если это свойство прописать для таких тегов как p, div, h1-h6 — они тоже не будут переноситься на новую строку.
А есть элементы которые и блочного типа, и в то же время не переносятся на новую строку, так как не принимают автоматически всю ширину блока, в котором они находятся. Это наши картинки — тег img.
И по умолчанию — значение их свойства display: inline-block;
Яснее стало хоть? Или только еще больше запутал? :)
По поводу ссылки a — не обязательно делать его display: inline-block; Достаточно указать поля сверху и снизу, и она автоматически будет принимать размер с учетом содержимого и величины шрифта.
Я именно так и реализовал. ;)
Дима, там у тебя Allpa спрашивала про это свойство, и я нажал ответить, но по ходу не нажал :)
И у меня этот коммент здесь ни к лесу ни к полю.
Я сделаю его дубликат ответом Allpa, а ты этот коммент и тот который выше удали плиз.
Сор за спам :)
Очень красивая кнопочка получается, на премиум сайтах почти все всегда лучшее :)
PIE. htc разве не должен решить проблемы с ie?
Возможно. Не люблю использовать такие скрипты.
Дима, спасибо, кнопки поставил у себя на сайте — отличненько смотрится.
Правда со своим градиентом.
Потом напишу статью о сайте где кину на тебя ссылку.
По поводу PIE — если его подключить, то появляется тень, градиент и все округляется, НО!
В IE7 сбивается центрирование текста, отступы и кнопки становятся очень высокими, короче — я его отключил, ибо это НЕЧТО отдаленно похожее на кнопку, за то с тенью и градиентом :)
Да, подобные скрипты-костыли одно лечат, а другое калечат =)
Просто Максим по умолчанию этот PIE засунул в систему, я его всегда удаляю.
Давно использую подобное, правда, каждый раз вспоминаю о бедных юзерах IE. Жалко их.
Чего их жалеть?
Если человек лениться перейти на лучшее решение — пускай сидит и довольствуется косяками :)
Спасибо за кнопки, делаю шаблон на MaxSite CMS — как раз будет где применить.
Помнится, впервые такого типа кнопки представил вебмастерам буржуйский верстальщик tjrus. В избранное однозначно, долой картинге!
Спасибо Димокс!
Тут вреде ошибочка вкралась
.submit:-moz-focus-inner{border:0}
Нет, все правильно.
Красявишно, надо попробовать.
Точно-точно надо :)
=)
Отличные кнопки! Спасибо, будем юзать)
А как вставить ссылку? В кнопку?
Вместо тега
buttonиспользуйте тегa.Спасибо=) Мне нужно было попробовать, а потом спросить. Но я был уверен, что не получиться.
Спасибо большое! Шикарные кнопки…
10 вариантов? по мне, так 1))
Ух ты, а серая кнопка подойдет и для моего скучного и серого сайта! Забираю! Да спасибо!
Спасибо за отличный материал. уже подкорректировал на всех своих сайтах кнопки в комментирование. выглядят отлично. Надеюсь найду у вас на сайте еще что небудь новенького для себя