Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X

Генератор кнопок CSS3

Как мы уже знаем CSS3 облегчил работу верстальщику, теперь не нужно делить блок на несколько частей чтобы закруглить угли блока, достаточно использовать один параметр — border-radius и вуаля. Или чтобы сделать простую кнопку с градиентом, верстальщику нужно было ее сначала вырезать с макета, сделать спрайт (чтобы кнопка реагировала на наведение), написать немало строк css кода. Но и тут css3 облегчает нам задачу, все можно решить используя только код, казалось бы куда еще проще? И тут к нам на помощь приходят различные генераторы, с помощью которых мы можем сделать кнопку на любой вкус, при этом не обязательно понимать данный язык разметки. Достаточно только указать нужную форму, размер, шрифт и цвет и получить наш код для вставки на сайт. И самое главное при изменении одного из параметров мы моментально видим как меняется внешний вид нашей кнопки.

И так чтобы сделать кнопку для сайта вам нужно перейти по ссылке генератора кнопок. Вы увидите следующее:

buttons maker css3

Слева мы видим нашу кнопку, а справа различный настройки для нее.

И так первые три слайдеры-регуляторы нужны чтобы задавать форму и размер кнопки (см. картинку ниже).

slider

Оставшиеся настройки отвечают за стиль кнопки, а именно за цвет текста и градиента, обводку и реакцию при наведение или нажатии курсора (см. картинку ниже).

options css3

Теперь когда вы выбрали нужные вам настройки нажмите по вашей кнопке и скопируйте стили к себе на сайт (см. картинку ниже).

code button css3

ПРИМЕТКА: .button — это класс нашей кнопки.

Если хотите узнать больше возможностей css3 то посмотрите подборку примеров.

На этом все, вопросы задавайте в комментариях.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X