Набор кнопок для сайта с CSS3 эффектами нажатия! | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSНабор кнопок для сайта с CSS3 эффектами нажатия!
Дата: 19.07.2013 в 16:03 | Просмотров: 11622

Набор кнопок для сайта с CSS3 эффектами нажатия!

css3 кнопки, набор кнопок для сайта, эффект нажатия кнопки
Скачатьбесплатно с сервера
Демодемонстрация

Привет, друзья! Хочу с радостью представить Вам набор кнопок для сайта. По-моему, невозможно создать ни один сайт без кнопок. В этом уроке мы рассмотрим css3 кнопки с псевдо-элементами, а также эффекты, созданные с помощью них.

Я покажу Вам, как создать кнопку с изюминкой, используя только лишь один тег для кнопки + великую силу CSS3. :) На нашем сайте есть большое количество кнопок и эффектом для них, и одну из коллекция смотрите здесь.

Эти кнопки не имеют CSS переходов, так как не многие браузеры поддерживает их для псевдо-элементов. Я думаю, что эти кнопки работают нормально и без них, и смотрятся достаточно солидно и современно.

HTML разметка кнопок

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

Давайте рассмотрим каждый из эффектов в отдельности.


→ Пример 1

css3 кнопки

Я думаю, это самый простой пример, со знакомыми свойствами CSS.

Прежде всего, мы дадим общие стили для всей кнопки, в том числе и в активном состоянии. Важно заметить относительное позиционирование (position:relative;), так как это поможет нам позже с позиционированием элемента :before.

Затем, мы создаем серый контейнер используя псевдо-элемент :before. Абсолютное позиционирование (position:absolute;), дает нам много преимуществ:


→ Пример 2

3d кнопка на css

Этот пример сложнее, так как мы создадим 3D эффект нажатия (когда Вы нажимаете на неё, она идет вниз).

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


→ Пример 3

кнопка с псевдо-элементом

Эта кнопка мне особенно очень нравится! Это разделенная кнопка, которая “ломается” при нажатии на неё.

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

Вот сам псевдо-элемент CSS:


→ Пример 4

эффекты кнопки при нажатии

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


→ Пример 5

css3 кнопка "Нравится"

Это пример кнопки “Нравится!”, которую Вы можете использовать на свое усмотрение.

Да, это конец!

Мы закончили работу над этим набором кнопок для сайта, с CSS3 и 3D эффектами. Однако помните, что эти кнопки все же по большей части экспериментальные, поэтому не каждый браузер поддерживает их достаточно хорошо.

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


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Как поставить кнопку “Нравится урок” на юкоз вместо рейтинга? Она не работает.

      1. Влад Бондаренко (Admin):
        http://vladmaxi.net

        В уроке приводится просто пример того, что можно сделать на css3, и Вы можете скачать готовые, рабочие исходники всех кнопок, и использовать их на своем сайте или просто заимствовать концепцию их создания.

    1. Владимир:
      @

      Спасибо за кнопки, шикарные. В Опере 20 работают. Но будут ли работать в более древних версиях? Например, в столь любимых всеми 8, 10 и 12?

      1. Влад Бондаренко (Admin):
        http://vladmaxi.net

        Владимир, да, действительно – кнопочки эффектные..:)
        На самом деле 100% корректно данные кнопки будут работать только в браузерах, поддерживающих CSS3. Переживать о том, что у кого-то старая версия браузера, я думаю, не стоит, так как количество таких людей падает, и их существенное меньшинство, поэтому ставьте смело, и не переживайте;)
        И успехов Вам!:)

Добавить комментарий