logo

Оформление кнопок для сайта

Практически на любом сайте Вы найдете хотя бы одну кнопку. Это может быть кнопка «Поиск», или «Скачать», или «Читать полностью», или какая то другая.

Ранее в качестве кнопок использовался ссылка-рисунок. При наведении на нее курсора одна картинка замещалась другой, чтобы создать иллюзию движения. В настоящее время с помощью CSS3 появилась возможность создавать всевозможные кнопки совершенно не используя картинки. При этом кнопка может менять цвет, размеры, форму, надписи, создавать эффект нажатия, совершать различные «движения»

Набор кнопок

Внешний вид кнопок показан на рисунке, кнопки имеют одну и ту же структуру и отличаются только цветом фона, за исключением верхнего ряда, где они отличаются еще и по форме.

Примеры кнопок
Примеры кнопок

3 кнопки из набора, которые покажут как работает данная группа.

DownloadDownloadDownload

Просто красивая кнопка.

Кнопка с красивым диагональным «штриховым» градиентом, разделенным как бы пополам по средней линии. Интересен также эффект нажатия кнопки при клике по ней. Такая кнопка, без сомнений, украсит любой сайт.

Download

Кнопки социальных сетей.

Это простые кнопки — не ссылки, и их возможно использовать как угодно.

Кнопки со сдвигом

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

3D-кнопки

СКАЧАТЬ

Кнопка в зеленых тонах будет хорошо смотреться в сайте о природе. А вот красная…. пока не придумал.

СКАЧАТЬ

Голубоватый фон этой кнопки напоминает о чистом голубом небе (лирика).

СКАЧАТЬ

Камера хранения

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


Практические примеры 0

Рекомендую прочитать...

3D-трансформация в примерах
3d трансформация в примерах

В первом примере при наведении курсора на изображение как бы открывается обложка альбома, открывая скрытую, но «важную» информацию.
Второй пример — первоначально блоки с анонсом мы видим в перспективе, при наведении мышки блок принимает нормальный вид.

Читать полностью
Оформление кнопок на сайте
Кнопки для сайта

Продолжаем публикацию оформления кнопок для сайта. Сегодня рассмотрим кнопки с изменением внешнего вида при наведении в виде шторок и анимации текстового содержимого.

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

Читать полностью
Lightbox на чистом CSS3 без JavaScript
Lightbox на чистом CSS3 без использования JavaScript

Распространение разметки CSS3 и поддержка ее современными браузерами, позволило создавать эффект всплывающего поверх контента изображения на чистом CSS3.

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.