Как сделать кнопку мигающей?

Мигающая кнопка — элемент web-дизайна, который помогает сделать страницу яркой и привлекательной. Однако при использовании этого эффекта необходимо подумать и об удобстве пользователей: не стоит злоупотреблять рябящими «фишками».
Создать сайт самостоятельно с Wix.com

Инструкция

Если нужная кнопка, представленная в виде картинки-ссылки и меняющая цвет после наведения курсора, создайте ее с помощью таблицы и атрибутов onMouseOver и onMouseOut. Кнопка

Сделать мигающую кнопку можно с использованием JavaScript. Чтобы эффект начинал действовать при наведении мыши, а затухал после того, как курсор будет убран, используйте следующий код:Заголовок вкладки arrColor = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; function mouseOut() { for (i = 0; i < 13; i++) setTimeout ('document.blinkbutton.button.style.background = "#'+arrColor[15-i]+'0'+arrColor[15-i]+'FFF";', i * 50); } function mouseOver() { for (i = 0; i < 15; i++) setTimeout ('document.blinkbutton.button.style.background = "#'+arrColor[i]+'0'+arrColor[i]+'F31";', i * 50); }

Если под рукой есть Adobe Photoshop, то сделать мигающий эффект можно прямо в графическом редакторе. Для этого создайте новый файл, а также новые слои, количество которых должно быть равным сумме кадров. После этого на правой панели выделите «глазиком» первый слой и откройте из меню «Окно» пункт «Анимация». На появившейс панели нажмите кнопку дублирования фрейма, переставьте «глазик» на следующий слой и т.д. Правой кнопкой мыши щелкните по каждому кадру и задайте время. Просмотрите полученный результат, при необходимости доработайте и сохраните в формате GIF («Сохранить для Web»).

Оцените статью!