Создание нажимающейся кнопки
Очень часто бывает так, что стандартные кнопки не вписываются в задуманный дизайн сайта. Хочется своих индивидуальных и стилизованных кнопок.
Изображения обычной и стилизованной с помощью CSS кнопок на сайте
Создать собственную конпку для сайта очень просто, буквально за 5 минут.
Во-первых, нужно нарисовать кнопку. Для этого подойдёт любой графический редактор, будь то Фотошоп, Иллюстратор, Корел или что-то иное.
Для примера мы нарисовали такую:
Кнопка на сайт
Её можно вставлять в дизайн сайта и использовать! Вставить кнопку можно используя CSS несколькими способами. Можно использовать DIV, SPAN, A и, конечно же, INPUT и BUTTON. Мы рекомендуем использовать А (гиперссылка). А чуть дальше станет ясно, чем обоснован этот совет.
Например так:
В качестве свойства элемента background-image указываем ссылку на нарисованную кнопку, а также размеры этой нашей кнопки в пикселях.
Вот, в принципе, и всё! Теперь на сайт можно вставлять любую стилизованную кнопку, гармонично вписывающуюся в его дизайн.
Однако, не многих удовлетворит кнопка в качестве картинки. Хочется ещё, чтобы на эту кнопку можно было бы нажимать. Реагирование кнопки на то, что на неё нажимает пользователь, это, во-первых, более красиво и эстетично, а, во-вторых, с точки зрения юзабилити, более эффективно. Ведь, пользователь видит, что кнопка среагировала на его нажатие, значит он её действительно нажал!
Эффекта нажимаемой кнопки также очень легко добиться.
Для этого нам потребуется ещё один рисунок, на этот раз, — изображение нажатой кнопки.
Мы нарисовали вот такой:
Изображение нажатой кнопки
Теперь остаётся только соединить эти два рисунка вместе.
Добиться этого можно двумя путями – с помощью JavaScript и с помощью простых инструкции CSS. И вот тут становится понятно, почему элемент A выбирать выгоднее. Если мы выбираем гиперссылку, то можно создать динамичную кнопку без применения скриптов, только чистым CSS.
У гиперссылок изначально существует несколько так называемых «псевдостилей»: active, hover, link, visited. Иными словами, этим псевдостилям задаются параметры различных состояний гиперссылки (когда к гиперссылке поднесли мышь, когда на неё нажали, посещённая ссылка).
- active – применяется к активным гиперссылкам, т.е. на ту ссылку, на которой на данный момент находится фокус пользователя.
- hover – применяется к гиперссылкам, когда пользователь помещает над ними курсор мыши.
- link – применяется к непосещённым ещё гиперссылкам.
- visited – применяется, как можно догадатся, к уже посещённым ссылкам.
Благодаря описаниям этих псевдостилей в CSS-таблице можно добиться эффекта нажатия кнопки.
Делаем это, добавляя несколько дополнительных строк к нашему css-коду:
Благодаря этому маленькому дополнению в одну строчку мы добились эффекта динамический кнопки, «реагирующей» на нажатие пользователя.
В качестве дополнительного эффекта реагирования кнопки на то, что над ней появился курсор мыши, можно нарисовать ещё один рисунок – с тенью или свечением по периметру самой кнопки. Тень – для светлых сайтов, свечение, соответсвенно, – для сайтов с тёмным фоном. А в CSS свойствах дописать ещё одну строчку:
Это придаёт дополнительный красивый эффект. Ну, а если в одном месте расположено сразу несколько кнопок и все они небольшого размера, то это становится просто необходимым.
Исходные коды тут: ZIP-архив (11,2 Кб)
