Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание интересной кнопки с использованием CSS3

21 октября 2014 | Опубликовано в css | 4 Комментариев »

Сегодня мы научимся создавать интересную кнопку при помощи CSS3. Мы стараемся использовать тег <button>, а не <input type="submit" />, но, что бы вы не предпочли, стиль по умолчанию будет зависеть от вашей операционной системы. Это может несколько расстраивать... Давайте создадим более интересную кнопку, используя стили CSS3, анимацию и трансформации:

 

 


Демонстрация работы и исходный код

HTML 

Здесь ничего неожиданного — нам нужен только тег для кнопки:

<button>Click me!</button>

Мы применим эти стили к каждой кнопке, но, если Вы предпочитаете сделать иначе, добавьте класс и атрибут target в CSS в соответствующих местах.

CSS 

Наша кнопка должна работать хорошо в последних версиях браузеров, а также не терять основные черты в старых версиях. Так что мы добавим приставки производителей в CSS только там, где без них нельзя обойтись. Браузеры Firefox, Internet Explorer 10 и выше, а также старые версии браузера Opera поддерживают переходы, преобразования и анимацию без приставок производителей, но нам потребуется приставка -webkit- для браузеров Chrome, Safari и новых версий Opera.

Давайте начнем с основных стилей, чтобы придать форму кнопке:

button
{
display: block;
font-size: 1.1em;
font-weight: bold;
text-transform: uppercase;
padding: 10px 15px;
: 20px auto;
color: #ccc;
background-color: #555;
background: -webkit-linear-gradient(#888, #555);
background: linear-gradient(#888, #555);
border: 0 none;
border-radius: 3px;
text-shadow: 0 -1px 0 #000;
box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
cursor: pointer;

Ничего слишком сложного. Мы использовали везде довольно обычный серый цвет, но Вы можете использовать любые нужные Вам цвета. Заметьте, что свойство background-color было задано для браузеров, не поддерживающих линейные градиенты. Мы также установили вид курсора как указатель, непонятно, почему браузеры не делают этого по умолчанию.

Тень блока — наиболее интересное свойство: box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6). Этим свойством мы задаем края кнопки, глубину в 5px и легкую тень вокруг нее.

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

    -webkit-transition: all 150ms ease;

transition: all 150ms ease;
}

 

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

button:hover, button:focus
{
-webkit-animation: pulsate 1.2s linear infinite;
animation: pulsate 1.2s linear infinite;
}
@-webkit-keyframes pulsate
{
0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}
@keyframes pulsate
{
0%   { color: #ddd; text-shadow: 0 -1px 0 #000; }
50%  { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }
100% { color: #ddd; text-shadow: 0 -1px 0 #000; }
}

 

Браузеры Firefox, Chrome и Safari не требуют определений 0% и 100%, но Internet Explorer без них не может анимировать свойство тени текста. Не забывайте об этом.

В заключение мы задаем стили для активного состояния кнопки:

button:active
{
color: #fff;
text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
-webkit-transform: translateY(3px);
transform: translateY(3px);
-webkit-animation: none;
animation: none;
}

 

Эти свойства работают следующим образом:

  • Анимация выключается и текст переходит в состояние полного сияния.
  • Кнопка сдвигается на 3 пикселя вниз при помощи  translateY.
  • Свойство  box-shadow, которое определяет глубину кнопки, изменяется на  0 2px 0 #444. Поэтому кнопка была уменьшена с 5px до 2px, но переход 3px создает впечатление, что кнопка утоплена в страницу.
  • Внешняя тень тоже уменьшена, чтобы создать впечатление, что кнопка расположена ниже.

Кнопка готова:

Демонстрация работы и исходный код

Кнопка работает, как задумано, во всех современных браузерах и многих старых версиях. Единственная замеченная проблема связана с версиями браузера Opera до перехода на движок Webkit — пульсирующая анимация воспроизводится только один раз. Но в современных версиях все работает правильно.

Пожалуйста, используйте код, как захотите.

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также:




Комментарии

  1. Кирилл
    Thumb up Thumb down +3

    Ну и для вебкитовых браузеров еще желательно прописать button:focus {outline:none} а то синяя обводка всю красоту портит.

    Ответить

  2. Евгений
    Thumb up Thumb down 0

    К button надо добавить outline: none;

    Ответить

  3. Александр
    Thumb up Thumb down 0

    Полностью согласен с двумя предыдущими ораторами. А то убого смотрится.

    Ответить

Оставить ответ


8 + семь =

Вставить изображение