Создаем мягкие кнопки для сайта с помощью CSS3 RUDEBOXВеб-дизайн — это тяжелая работа, нужно учитывать множество нюансов, от общей организации материала на странице до цветовых оттенков и типографики. Не стоит забывать о том, что на сайте также присутствуют такие важные элементы как кнопки и элементы выбора. В данном уроке мы рассмотрим как создать замечательные «мягкие» кнопки для сайта исключительно с помощью css, мы не будем использовать никаких изображений, что упростит процесс загрузки. Давайте посмотрим, что у нас получилось.

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

Шаг 1. HTML

Нам необходимо создать разметку для кнопки, кроме этого у нас будет на них элементы, это плюс и минус, с абсолютным позиционированием:

Как вы заметили ничего сложного нет, мы используем чеки. Которые взяты за основу кнопки.

Создаем мягкие кнопки для сайта с помощью CSS3 RUDEBOX

Шаг 2. CSS

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

Если вы хоть не много понимании в css, то у вас не должно вызвать трудностей.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: