—»     —»   Создаем кнопку на CSS3 с красивыми эффектами
  Раздел: Кнопки   Нет комментариев  

Создаем кнопку на CSS3 с красивыми эффектами

Были времена, когда для создания красивой кнопки нужно было усердно использовать изображения, и даже javascript. Так как большая часть современных браузеров имеют поддержку CSS, мы будет делать нашу кнопку именно на нем. Firefox, Safari и отчасти Opera поддерживают закругленные углы, тени таблиц и тени текста. Все, что раньше делалось в 6 этапов и дополнительной продвинутой версткой, сегодня может быть сделано в три этапа при помощи простого CSS3.

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

Что мы сегодня будем делать

Для создания красивой кнопки у нас будет примерно такой вот план:

* Красивая фоновая градация
* Закругленные углы
* Красивые границы для придания трехмерного эффекта
* Тень
* Тень текста (для большей красоты)

В итоге у нас получится вот такая вот кнопка, с использованием всего лишь небольшого изображения градации (а если CSS будет поддерживать градацию, то нам и вовсе не понадобятся изображения).

Создаем кнопку на CSS3 с красивыми эффектами

HTML

<p><a href="#">Example Button</a></p>
<p><a href="#">Example Button</a></p>
<p><a href="#">Example Button</a></p>

Как вы уже заметили, HTML-сторона очень простая. Нам просто требуется тэг анкора и текст. А абзац тут просто для соблюдения грамотности составления кода.

CSS

.css3button a {
     background: url(background.gif) bottom repeat-x #9eabb3;
     padding: 5px 10px 5px 10px;
     text-align: center;
     font-weight: bold;
     color: #fff;
     text-decoration: none; border: 1px inset #aaa;
     -webkit-border-radius: 8px; width: auto; -moz-border-radius: 8px;  -khtml-border-radius: 8px;  border-radius: 8px;
     -moz-box-shadow: 1px 1px 1px #666;  -webkit-box-shadow: 1px 1px 1px #666;  box-shadow: 1px 1px 1px #666;
     text-shadow: rgba(0,0,0, .5) 0px -1px 0px;
      border-top: inset 1px #ccc; border-left: inset 1px #ccc; border-bottom: solid 1px solid #000; border-right: 1px solid #666;
}

.css3button a:hover  {
     background: #999;
     text-shadow: rgba(0,0,0, .5) 0px 1px 0px;
}

В коде CSS все немного сложнее, но всё же не так сложно. Мы просто ставим повторение на фоновое изображение, закругления углов и тени для таблицы и текста. Такие углы придают немного глубины и затемнения, это гарантирует нам приятный выпуклый вид, даже если не будет поддержки CSS.

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

Создаем кнопку на CSS3 с красивыми эффектами

Это очень просто

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

Примеры

Создаем кнопку на CSS3 с красивыми эффектами

Скачать архив с примерами: css3-buttons.rar [2,9 Kb] (cкачиваний: 530)
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: кнопки, CSS
Опубликовал Mysterious Master   Прочитано (раз): 17607   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

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


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Продвижение онлайн-школ
продвижение онлайн-школ
balanda.ru
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031