0,0
рейтинг
12 января 2012 в 00:56

Разработка → CSS кнопки с помощью псевдо-элементов перевод tutorial

CSS*


Здравствуйте, друзья. За последний месяц я экспериментировал с псевдо-элементами, особенно, с их использованием в создании кнопок. Таким образом, удалось создать крутые эффекты, которые раньше можно было сделать только со спрайтами.

В этом уроке я покажу как создать кнопку с изюминкой, используя только якорный тег и мощь CSS.



Используется шрифт «Open Sans» Стива Мэттсона.

Дисклеймер

Я не буду использовать CSS префиксы в данных примерах, но вы найдете их в исходных файлах.

Я не использовал свойство transition, потому что только Firefox поддерживает его в псевдо-элементах. Кроме этого, я считаю что кнопки работают хорошо и без его использования.

Разметка


Для работы всех кнопок пригодится только якорь, все остальные элементы мы будем создавать с помощью псевдо-класса ::before.

<a href="#" class="a_demo_one">
     Click me!
</a>


Первый пример




Я думаю это самый легкий пример, который делается обычным CSS.

Стили


Прежде всего, зададим основные стили для кнопки в обычном и активном состоянии. Обратите внимание, что кнопка позиционирована относительно. Это поможет при позиционировании элемента ::before:

.a_demo_one {
	background-color:#ba2323;
	padding:10px;
	position:relative;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	border: solid 1px #831212;
	background-image: linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%);
	border-radius: 5px;
}

.a_demo_one:active {
	padding-bottom:9px;
	padding-left:10px;
	padding-right:10px;
	padding-top:11px;
	top:1px;
	background-image: linear-gradient(bottom, rgb(171,27,27) 100%, rgb(212,51,51) 0%);
}


Теперь сделаем серый контейнер вокруг кнопки, используя псевдо-элемент ::before. Абсолютное позиционирование сделает нашу жизнь легче при позиционировании самого элемента.

.a_demo_one::before {
	background-color:#ccd0d5;
	content:"";
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	padding:8px;
	left:-8px;
	top:-8px;
	z-index:-1;
	border-radius: 5px;
	box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
}


Второй пример




Этот пример немного сложнее из-за 3D-эффекта. Изначально кнопка находится за пределами контейнера, затем, при щелчке она уходит вниз:

.a_demo_two {
	background-color:#6fba26;
	padding:10px;
	position:relative;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%);
	box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d;
	border-radius: 5px;
}

.a_demo_two:active {
	top:7px;
	background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
	box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d;
	color: #156785;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
	background: rgb(44,160,202);
}


Стили


А вот здесь уже сложнее:

Так как положение псевдо-элемента зависит от родительского элемента, то при перемещении родительского элемента на несколько пикселей, псевдо-элемент необходимо переместить на столько же пикселей, но в другую сторону.

.a_demo_two::before {
	background-color:#072239;
	content:"";
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	padding-left:2px;
	padding-right:2px;
	padding-bottom:4px;
	left:-2px;
	top:5px;
	z-index:-1;
	border-radius: 6px;
	box-shadow: 0px 1px 0px #fff;
}

.a_demo_two:active::before {
	top:-2px;
}


Третий пример




Это одна из моих любимых кнопок, так как такой еще не было, перед тем, как я ее создал. Кажется, людям она очень нравится. Кнопка разделена на две части, и когда вы нажимаете на нее, она как бы «ломается».

Стили


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

.a_demo_three {
	background-color:#3bb3e0;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	position:relative;
	padding:10px 20px;
	border-left:solid 1px #2ab7ec;
	margin-left:35px;
	background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}

.a_demo_three:active {
	top:3px;
	background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}


Перейдем к псевдо-элементам:

.a_demo_three::before {
	content:"·";
	width:35px;
	max-height:29px;
	height:100%;
	position:absolute;
	display:block;
	padding-top:8px;
	top:0px;
	left:-36px;
	font-size:16px;
	font-weight:bold;
	color:#8fd1ea;
	text-shadow:1px 1px 0px #07526e;
	border-right:solid 1px #07526e;
	background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
}

.a_demo_three:active::before {
	top:-3px;
	box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
}


Четвертый пример




На этот раз мы будем использовать псевдо-элемент для стрелки, используя фоновое изображение. Вместо изображений так же можно использовать эти шрифтовые иконки.

Стили


.a_demo_four {
	background-color:#4b3f39;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	position:relative;
	padding:10px 20px;
	padding-right:50px;
	background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
	border-radius: 5px;
	box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}

.a_demo_four:active {
	top:3px;
	background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
	box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}

.a_demo_four::before {
	background-color:#322620;
	background-image:url(../images/right_arrow.png);
	background-repeat:no-repeat;
	background-position:center center;
	content:"";
	width:20px;
	height:20px;
	position:absolute;
	right:15px;
	top:50%;
	margin-top:-9px;
	border-radius: 50%;
	box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}

.a_demo_four:active::before {
	top:50%;
	margin-top:-12px;
	box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}


Пятый пример




Этот пример не очень крутой, но вы можете его доработать по своему усмотрению.

Стили


.a_demo_five {
	background-color:#9827d3;
	width:150px;
	display:inline-block;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	position:relative;
	margin-top:40px;
	padding-bottom:10px;
	padding-top:10px;
	background-image: linear-gradient(bottom, rgb(168,48,232) 100%, rgb(141,32,196) 0%);
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	box-shadow: inset 0px 1px 0px #ca73f8, 0px 5px 0px 0px #6a1099, 0px 10px 5px #999;
}

.a_demo_five:active {
	top:3px;
	background-image: linear-gradient(bottom, rgb(168,48,232) 0%, rgb(141,32,196) 100%);
	box-shadow: inset 0px 4px 1px #7215a3, 0px 2px 0px 0px #6a1099, 0px 5px 3px #999;
}

.a_demo_five::before {
	background-color:#fff;
	background-image:url(../images/heart.gif);
	background-repeat:no-repeat;
	background-position:center center;
	border-left:solid 1px #CCC;
	border-top:solid 1px #CCC;
	border-right:solid 1px #CCC;
	content:"";
	width:148px;
	height:40px;
	position:absolute;
	top:-30px;
	left:0px;
	margin-top:-11px;
	z-index:-1;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.a_demo_five:active::before {
	top: -33px;
	box-shadow: 0px 3px 0px #ccc;
}


В заключение


Ну, вот и все. Не забывайте, что эти создание этих кнопок является экспериментом, так что не каждый браузер будет корректно их отображать.

Спасибо за чтение этого урока, я надеюсь, вы найдете ему применение.

Демонстрация | Исходники
Перевод: Sergio Camalich
Салават Абдуллин @nabliker
карма
44,2
рейтинг 0,0
Дизайнер
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (117)

  • +23
    Понимаю что пост не о дизайне, но кнопки в 3-м и 4-м примере очень понравились
    • +20
      их таааааааак приятно нажимать )
      • 0
        В 4-ом примере если нажать на стрелочку, уже не так приятно получается :)
    • +1
      Мне кажется, что пост всё же о дизайне.
  • +6
    Если отпустить мышь за пределами кнопок, то осуществляется неверное поднятие, в результате которого оно не происходит.
    • +16
      Взорвал мне мозг.
      • +3
        Отпустить мышь за пределами кнопок мыши, всё ок.
        • +4
          в ФФ не всё ок, кнопка остаётся вдавленой
    • 0
      В опере всё нормально.
      • +1
        А Вы кнопку утаскивайте не только влево/вправо, но и вверх/вниз, у меня на опере баг проявился.
        • НЛО прилетело и опубликовало эту надпись здесь
    • +11
      Тестер интерфесов детегтед!
      • +1
        интерфейсов, конечно же…
      • +1
        Боже упаси, но обычно сам не оттестишь — завалят багами.
  • 0
    Очень круто, спасибо большое! Открыл третий пример, жмякал по кнопочке и наслаждался.
  • –14
    Сколько уже подобных однообразных постов было, и сколько ещё будет… Ни конца, ни края нет людской радости от изучения CSS3…
    • +1
      причем мы сейчас обсуждаем css 2.1 )) согласен что много подобных постов, но эта статься тоже интересная и немногословная
    • 0
      > Ни конца, ни края нет людской радости от изучения CSS3…
      Как будто что-то плохое.
  • +5
    Посмотрел в IE 9-ом, поржал :)
    • +2
      а мне грустно.
      • +7
        Смешно вот это:

        «HTML5 является ядром Internet Explorer 9, а благодаря широкой поддержке таких веб-стандартов, как HTML5, CSS3, Canvas, SVG и многих других вам доступно больше инструментов для создания более прекрасного Интернета.»

        msdn.microsoft.com/ru-ru/ie/aa740469
    • +2
      А над чем ржать? Там вроде всё кроме градиентов (которые для каждого браузера свои прописываются, а для webkit'а еще и в двух экземплярах, автор спокойно мог добавить градиенты через filter).

      Добивает, что для каждого свойства городят свои префиксы, ну сделайте что-то типа -beta-linear-gradient, -draft-linear-gradient, это же не они придумали это свойство, оно есть в черновике стандарта…

      Кстати Opera 11.6 почему кружок со стрелкой прибила к верхнему краю.
      • +3
        Это очень логично, т.к. на стадии тестирование у каждого свои косяки. И если, например, хром нормально будет поддерживать super-property а опера его будет поддерживать частично (глючить), то мы не сможем включить его для хрома так, чтобы в опере было нормально.
        • 0
          Имхо, от этого был бы толк, если бы новые версии браузеров не появлялись с такой частотой. А так на деле получается так пробуем свойство во всех браузерах основных, если более менее одинаково работает, то юзаем, если нет, просто откладываем на потом (я не говорю о тестовых сайтах, задача которых показать, как работает эта фича).
          Косяки есть и сейчас причем на вещах которые якобы уже стандартны. Например, в Opera не пашет text-overflow: ellipsis для ячеек таблицы, в хроме тоже косяки с таблицами были, пришлось для хрома даже хак писать. Лучше бы сделали условные операторы как в IE, чтобы можно было без ручного определения браузера, и даже без JS, юзать разный код для разных браузеров.
      • +1
        Фильтры в ИЕ ведут к прекращению работы border-radius у элемента. Так что тут надо выбирать: либо круглое, либо градиентное.
        • +1
          CSS Gradients for IE9 — и кругло и с градиентом.

          А вообще есть полноценный сервис по создаю кроссбраузерных градиентов: Ultimate CSS Gradient Generator
          • 0
            OMG, есть же Compass.
            • 0
              И да, оно работает с IE.
              • 0
                Оно не работает с IE9, как писалось выше, фильтры не работают с border-radius, поэтому градиент необходимо делать через SVG.
        • НЛО прилетело и опубликовало эту надпись здесь
      • +1
        Чтобы было кроссбраузерно, надо делать картинками.

        Но тоже придётся кое с чем мириться.
    • 0
      >Посмотрел в IE 9-ом, поржал :)

      залейте скриншот если не трудно, девятый ослик не у всех под рукой есть
  • +4
    Надо сбацать музыкальный сайт с интерфейсом в виде стааааарой кассетной деки, где кнопки залипали, и использовать там данный пример.
  • 0
    Шикаррно :) Особенно понравился пример 4 с демо-сайта, кликал минут 5.
  • +1
    Прекрасно! Как бы не стало мэйнстримом…
    А то все хорошие штуки начинают доставать, когда они на всех абсолютно сайтах/блогах/и.т.п.
  • 0
    Охренительно! В 3 примере косячок с тенью от ненажимающегося элемента, да и вообще с тенями борщит порой автор, а в целом просто невообразимо красиво! Скорее бы вот так просто можно было все это использовать, без мозголомни с тем же IE.
  • 0
    и на семантику плевать, конечно! главное, что можно кликать левой кнопкой!
    • 0
      С семантикой всё в порядке. Такой приём довольно просто использовать для любого тега.
      • 0
        довольно просто использовать для любого тега, поэтому пример кнопки мы сделаем именно на ссылке, так держать
        • –1
          Умейте видеть суть вещей.
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            Автор не заставляет делать кнопки из ссылок, не говорит, что это правильно. Он выложил идею.

            Если капать глубже и перейти на иной уровень абстракции, можно понять, что всё очень даже семантично.

            Судите сами: суть статьи — показать, что кнопки можно делать с помощью псевдоэлементов и одного тега. Один тег есть? Есть! Псевдоэлементы есть? Есть! Всё. Больше от этой статьи не требуется ничего.
            • –1
              от этой статьи требуется больше. Требуется, чтобы сотни новичков-верстальщиков могли копировать из неё решение, которое не только работает, но ещё и правильное. А сейчас эти сотни новичков скопируют из неё не только «один тег с псевдоэлементами», но и использование ссылок в качестве кнопок. Я-то суть вещей увижу, а они — нет
              • +1
                Не лезьте в чужую голову.
                Никто не помрёт, если сделает кнопку из ссылки. Если человеку интересно верстать он очень скоро научится делать это правильно вне зависимости от этой статьи. Согласитесь, она всё же не о семантике, а о методе. Хотя наверное скорее даже просто о дизайне.
                • НЛО прилетело и опубликовало эту надпись здесь
              • +1
                Если уж так печётесь о новичках — накатайте годную статью о семантике. Для новичков это будет полезнее ваших комментариев.
                • +1
                  статей по семантике уже много, именно поэтому обидно видеть статьи по другим темам, где семантика игнорируется напрочь. А с подходом «никто не помрёт» российская милиция работает, только вот почему-то на него все жалуются
                  • 0
                    Знаете, американская гуглопочта как-то живёт с не семантичными кнопками. И мы все как-то работаем с ней.

                    А про милицию — это вас занесло. Не при чём она тут.
                    • 0
                      у гугла для семантики куча других атрибутов в кнопки напихана, хотя и фейлов у них достаточно. Можно сделать лучше.

                      а занесло скорее вас со смертями. Да, веб-разработка обычно не имеет дела с жизнью и смертью, но это не повод учить новичков делать фигню
                      • –1
                        >у гугла для семантики куча других атрибутов в кнопки напихана
                        Каких? Кнопка — это или button или input. Всё остальное — не семантично.

                        Быть может и «новички», обчитавшись кучи статей о семантике, тоже напихают кучу других атрибутов?
                        • +1
                          ясно, про wai-aria вы не слышали

                          новички не обчитаются, большинство новичков делает минимально необходимый с их точки зрения объём работы
                          • 0
                            При чём тут это? Не путайте технологию с семантикой.
                            • 0
                              об этом я уже не буду спорить
                              в любом случае можно делать лучше гугла
                              • 0
                                Лучше можно сделать всегда. Но гуглопочта отлично работает уже сейчас.
                                • –1
                                  недостаточно хорошо для меня
                                  • 0
                                    Тогда исправьте эту статью и отправьте в гугл. Я думаю, они сразу всё поймут и исправятся)
                          • –1
                            >большинство новичков делает минимально необходимый с их точки зрения объём работы

                            Таким людям подобного рода примеры, что мёртвому припарка.
                            • 0
                              то есть, из хороших примеров они не скопируют хороший код?
                              • 0
                                Копируют, конечно копируют. Но не вдумываются. А просто копипастят. А то, что они напишут сами — ни от каких примеров не зависит. Т.е. опять же образовательный смысл примеров для «новичков» стремиться к нулю. А опытный разработчик, как вы сами заметили, и так всё поймёт.
                    • НЛО прилетело и опубликовало эту надпись здесь
                      • 0
                        image
                        • НЛО прилетело и опубликовало эту надпись здесь
                          • 0
                            Кто мешает добавит role к примерам в статье?
                            Зачем придираться к семантике, если на деле, она играет третьестепенное значение.
                            • НЛО прилетело и опубликовало эту надпись здесь
                              • 0
                                Повесьте на эту ссылку переход по страницам. Делов-то!
                                • НЛО прилетело и опубликовало эту надпись здесь
                                  • 0
                                    Смысл в том, что статья не о семантике, а о методе. Если голова есть — применишь правильно.
                                    • НЛО прилетело и опубликовало эту надпись здесь
                  • –1
                    А если статей дофига, зачем переживать. Интересующийся человек обязательно прочтёт их.
                    • 0
                      заинтересовавшихся 10%, остальные 90% не разбираются, а копируют примеры, создавая таким образом большую часть веба. Поэтому и нужно примеры сразу делать правильными
                      • 0
                        Остальные 90% перестанут верстать спустя первые полгода, а их проекты умрут ещё быстрее.
                        • –1
                          это не так
                          вы оптимист
                          • 0
                            Вы не сильно от меня отличаетесь. Примером в одной статье улучшить работу 90% верстальщиков.
                            • 0
                              вы какие-то странные вещи вычитываете в моих буквах, дальше я с вами спорить не буду
                              • 0
                                Хорошо, засчитаю ваши каменты как вброс)
  • 0
    А еще кнопку третьего типа можно использовать для счетчика каких-нибудь «лайков». Цифра удачно стоит)
  • 0
    Ненавижу отсутствие :active у кнопок на многих сайтах.
    Разве так трудно сделать эффект нажатия? Ведь так и хочется чтобы кнопка проваливалась, или меняла цвет…
  • +7
    У вас там яндекс.метрика стоит, покажите карту кликов для 3его примера. Уж очень интересно…
    • 0
      Поддерживаю!
      А в целом — красиво получилось! Однозначно +
    • +2
      Не зря я ее все таки ее прикрутил :)



      Всего кликов: 78600

      • 0
        А как объясняются зеленые пятна в левой части?
        • 0
          Видимо, там тоже кликали :)
  • +2
    На пятой кнопке думаю не хватает при нажатии смещать текст вниз вместе с кнопкой, иначе теряется сам эффект «реалистичности» как на остальных 4-х кнопках.
  • +1
    Пример 3
    Мне немного показалось не совсем логичным, то при нажатии на циферку, нажимается кнопка рядом, а циферка остается. ИМХО, не должно ничего происходить, только когда саму кнопочку нажмешь, тогда надо «нажиматься».
    • 0
      Поддерживаю. Мне тоже этот момент показался нелогичным. Совсем было бы круто, если бы циферка прибавлялась.
  • НЛО прилетело и опубликовало эту надпись здесь
  • +2
    а у меня в опере почему-то не всё ок с 4 примером :( стрелочки улетели вверх( ver. 11.60
    • 0
      Та же версия Оперы, та же проблема.
  • +2
    У вас примере кода для первой кнопки пропущена тень:

    .a_demo_one {
        ...
        box-shadow: 0 1px 0 #7FD2F1 inset, 0 1px 0 #FFFFFF;
    }
    
  • +1
    Все красиво, спасибо за примеры.
    Вот только если захочется прикрутить анимацию на CSS3 то придется отказываться от псевдоэлементов :(…
    • 0
      Автору желательно бы указать об этом в посте, сам натыкался на подобный недостаток.
      • 0
        Это написано в заключении.
      • 0
        Ошибся, это написано в дисклеймере.
  • +1
    Красиво. странно что даже ФФ3.6 косится на некоторые кнопки.
    • +1
      там с padding что-то не то в ФФ3.6
  • 0
    Пример №2 — больше напоминает «рычаг», а не кнопку… а 3 и 4 — волшебны!
  • 0
    Красивые кнопки, но прежде чем постить очередной пост о кнопках на CSS3, удивите народ, сделайте их хоть по всем правилам — clip2net.com/s/1tHso (ie7) обязательно учтите fallback для старых браузеров, понятно что там кнопки будут просто синими прямоугольниками, но кликаться вне области кнопки точно не должны.
    • 0
      ИМХО — старые браузеры должны умереть!
      • 0
        Пусть там будет не красиво, но основые действия должны работать, IE7 еще 3%.
  • +2
    Оппа! Пошёл на сайт демо кнопки опнаживать и облом.

    Виртуальный сервер salavat.me не существует или отключен.

  • 0
    Виртуальный сервер salavat.me не существует или отключен.

    Положите на jsFiddle.
    • +1
      Спасибо за совет, добавил ссылку в конце поста.
  • +1
    Ну все, положили сайт :)
    • +3
      Чрезмерное нажатие на кнопки вызывает повышенный износ псевдо-элементов, а также может привести к поломке деталей сервера :)
  • +1
    У меня (Linux, FF9):
    — нет стрелки на 4й кнопке — на jsfiddle-то картинки нет. Решается использованием '→' в content, но стрелка при этом получается не по центру кружочка. Варьирование padding-top приводит к искажению кружка в эллипс;
    — на 3й кнопке элемент :before выше, чем 'click me'. Варьирование font-size желаемого эффекта не дало.
  • +1
    Кнопки на столько приятны, что при нажатии вызывают улыбку.
  • 0
    Хочу сказать спасибо всем, кто повышал рейтинг статьи, оставлял комментарии, плюсовал карму, мне это безумно приятно, так как я здесь совсем не давно, и, честно говоря, не ожидал такого хорошего отношения со стороны Хабражителей :)

    Благодаря вам я получил годовую подписку на Букмейт, хотя сегодня сам хотел оплатить подписку на месяц :)

    Постараюсь в дальнейшем радовать вас новыми переводами хороших статей :)

  • 0
    сейчас разбираюсь с подобными тенями, поэтому вопрос: есть ли способ, чтобы это открылось на эксплорере ниже 9?
    не подскажите?
  • 0
    Подскажите, а можно ли сделать (например во втором примере) так, чтобы в меню:


    Home
    Prices
    Feedback



    Ссылка active отображалась зажатой кнопкой. Т.е. на активной страничке кнопка зажата, а на остальных — выпуклая. При переходе на другую, другая становилась зажатой…

    У меня не выходит :(
    • 0
      Хабр не позволяет теги вставлять =( Если можно в ЛС

      Home
      Prices
      Feedback


  • 0
    Не знаю почему, но мои кнопки не всегда срабатывают. Бывает что нажимаешь по кнопке — анимация отображается, но на другую страничку не переходит. Opera + IE. Перемудрил наверное с подпиливанием под себя :(
  • 0
    Стал разбираться, чтобы сделать себе подобные кнопки, и обнаружил серьезный баг.
    Дополнительные элементы кнопок засунуты под основной блок при помощи «z-index: -1» — но это прячет их под фон контейнера, делая невидимыми.
    В демке они видны только благодаря тому, что фон обрамляющего контейнера полупрозрачный. Но и то, он искажает цвета.
    Выходит, что этим кнопкам обязательно нужна дополнительная обертка со значением z-index > 0

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.