CSS кнопки — 4 интересных примера

Сегодня не будет сложных свойств CSS, о которых в последнее время я писал. Сегодня мы вернемся к самому простому. Мы создадим 4 кнопки с разными уникальными эффектами при наведении. Суть сегодняшней статьи — показать основные приемы работы с CSS. И эта статья будет скорее полезна новичкам нежели профессионалам. Каждый может использовать эти кнопки в своих проектах, но не ленитесь экспериментировать и создавать новые эффекты. 

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



CSS стили
В стилях CSS мы тоже ничего особенного изобретать не будем. За основу возьмем шрифт Helvetica, цвет текста установим в белый и избавимся от всего стандартного оформления ссылки (подчеркивание и т.д.):



Растягивающаяся кнопка


Первый пример будет наверное самым интересным. При наведении курсора мыши на кнопку на различных сайтах мы примерно знаем чего ожидать. Эта же кнопка будет с сюрпризом — она будет менять свой размер при наведении!
Суть в том, что вначале у нас будет обычная кнопка с текстом, в нашем случае «Подписаться». При наведении курсора мыши кнопка будет увеличиваться в ширину и мы увидим часть текста, которая изначально скрыта. Давайте посмотрим как реализовать такую идею.

CSS
Чтобы начать, нам нужно задать нашей кнопки цвет и форму. Ниже в коде мы устанавливаем высоту в 28px и ширину в 115px, добавляем отступы и границу кнопке.



Многие в последнее время удивляются когда видят, сколько стилей используется для создания всего лишь одной кнопки. Поэтому мы разобьем наш CSS на несколько фрагментов. В этом фрагменте, который в принципе необязателен, мы сделаем нашу кнопку более привлекательной. border-radius тут используется для создания закругленных углов. Линейный градиент мы будем использовать для создания фона нашей кнопки. Интерес этого градиента в том, что начинается он с прозрачного цвета, что хорошо сочетает его с любым фоном.



Теперь нам остается только прописать стили для создания анимации с помощью CSS. Для этого мы будем использовать свойство transition. Здесь все просто — мы выбираем тип анимации и задаем задержку.



Ну и последнее, что осталось сделать это задать стиль при наведении курсора мыши на кнопку. Здесь все еще проще. Мы просто увеличим ширину кнопки до 200px.



Изменение цвета кнопки при наведении курсора мыши


Эта кнопка будет немного проще предыдущей. Если сказать честно — это самый простой эффект, который можно применить к кнопке. Поэтому мы немного улучшим его, добавив плавную смену цвета кнопки. Сделаем это опять же с помощью transition.

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



В коде выше, мы устанавливаем цвет фона кнопки, высоту и ширину кнопки, выравниваем текст надписи по центру кнопки. Теперь давайте немного улучшим внешний вид кнопки. Как и в предыдущем примере закруглим углы с помощью border-radius, используем линейный градиент linear-gradient для фона и добавим тень снизу кнопки с помощью свойств box-shadow.



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



Кнопка с двигающимся фоном


А вот эта кнопка и эффект в ней применяемый очень интересны. Эффект будет очень сильно зависеть от выбранного вами фона. Советую вам использовать сервис по подбору текстур http://subtlepatterns.com/. А вот как мы добьемся нужного эффекта: мы применим фоновое изображение к кнопке, а при наведении курсора мыши мы будем просто прокручивать фоновое изображение. Добавьте к этому свойство transition и получите приятный скроллинг эффект.

Перейдем к нашим стилям CSS. Для начала зададим общие свойства. Здесь все примерно так же как и в предыдущих примерах, за исключением того, что мы будем использовать изображение в качестве фона. Мы так же зададим начальную позицию для фона (0,0). Это делается для того, чтобы создать эффект прокрутки. В последствии мы просто поменяем значение по вертикали.



Далее уже по привычному маршруту — закругляем углы и добавляем тень.



Анимацию мы добавим опять же с помощью свойства transition. Единственное, что меняется — это задержка — увеличим ее немного, чтобы сделать прокрутку немного более продолжительной.



Ну и пришло время для создания эффекта при наведении курсора мыши на нашу кнопку. Вспомним, что нам нужно поменять настройки фонового изображения. Начали мы с позиции «0 0″, теперь же прокрутим его до «0 150px». Если вы захотите сделать движение фона по горизонтали, то просто поменяйте первую цифру.



Кнопка с 3D эффектом нажатия


В последнем примере мы создадим популярный нынче вид кнопок, которые имитируют трехмерность. Этот эффект будет проще всех предыдущих, мы даже не будем использовать свойство transition. Но в итоге мы получим очень даже приятную кнопку.
Зададим основные стили для кнопки. Отличие от предыдущих примеров состоит в том, что мы будем использовать свойство text-shadow для надписи на кнопке дабы добавить реалистичности нашему эффекту.



Далее оформим нашу кнопку. Следует сказать, что эти стили обязательны для этого эффекта — без них вы не увидите результата. Здесь мы снова закругляем углы, создаем тень у кнопки, которая и будет имитировать 3D эффект, а так же используем градиент для фона кнопки.



А вот теперь зададим стили при наведении курсора мыши на кнопку. Этот эффект потребует самого большого кода. Для достижения нужного эффекта мы уменьшим высоту тени, добавим отступ. Это создаст эффект движения кнопки при нажатии. Далее перевернем градиент, что так же добавить реалистичности в наш эффект.



Данная статья, надеюсь, даст новичкам основные принципы по использованию CSS свойств для создания кнопок.