Анимированная кнопка для сайта с эффектом нажатия

На этой странице Вы можете скачать кнопку для сайта, имеющую два состояния - спокойное и наведённое (hover). Иными словами, при наведении на неё курсора мыши кнопка изменяется, появляется анимационный эффект нажатия.

кнопка

Изображения находятся в фотошоповском PSD-файле, каждый вид в своей отдельной группе. Для изменения цвета кнопки надо наложить градиент (либо просто однотонный цвет, в зависимости от того, что Вам нужно) на слои "Затенение внутреннего скоса" в каждой группе. Сделать это легче всего, добавив к слою стиль слоя "Наложение градиента".

Текстовый слой не растрирован, поэтому надпись на кнопке без труда можно изменить, введя свой текст вместо "ЗАДАТЬ ВОПРОС" в текстовые слои в каждой группе. Следует помнить, что в группе "Нажатое состояние" текст уменьшен на 5 процентов.

Размер самого изображения кнопки 100 на 19 пкс, но т.к. кнопка с тенью, то размер холста несколько больше, он равен 105 на 25 пкс. Сохранять кнопку для вэб-страницы только в PNG-24

Теги:

Помощь сайту

Понравился сайт? Уроки оказались полезными? Вы можете поддержать проект, просто если скачаете и установите приложение "Фонарик" для Андроид. Приложение написал автор сайта и рассчитывает в дальнейшем публиковать свои приложения. Фонарик управляет светодиодом вспышки фотокамеры телефона, а также включает подсветку экраном на полной яркости.

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

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

Установить с Google Play.

Заранее благодарен, Дмитрий.

QR-код для установки:

Если Вам понравился материал, скажите свое "спасибо", поделитесь ссылками с друзьями в социальных сетях! Спасибо!

Похожие материалы:

Пять серых выпуклых прямоугольных кнопок с градиентным переходом и закруглениями. Кнопки выполнены в трёх видах и отображают три состояния, это...
металлическая кнопка в Photoshop, добавление значка ON/OFF
Данная кнопка будет использоваться в андроид-приложении для включения/выключения светодиода,поэтому она должна иметь два состояния - ON и OFF. В...
Кнопки в формате PSD
Пять чёрных кнопок в формате PSD, Фотошоп. Кнопки в формате PSD, каждая кнопка в отдельном файле,видимость слоёв включена, разрешение - 72 dpi,...
Образцы
По ссылке в этой публикации Вы можете сбесплатно скачать файл PSD с восемью видами прямоугольных кнопок. Весомым преимуществом стиля дизайна этих...