Генератор Кнопок для сайта

Получить мои кнопки для сайта!

Верхний градиент фона

Нижний градиент фона

Цвет верхней границы (рамки)

Верхний градиент фона при Наведении

Нижний градиент фона при Наведении

Основной Цвет Текста

Цвет Текста при Наведении

Цвет Фона при Нажатии

Чтобы сделать кнопку для сайта на этом генераторе кнопок ненужно много знаний и умений. Поэкспериментируйте со всеми предоставленными параметрами: размером, цветовой палитрой и эффектом градиента, а также используйте цвет текста и форму вашей кнопки. Все довольно просто и ясноно. Когда Вы завершите все действия по созданию кнопки для сайта, чтобы получить код стилей CSS - Жмите! "Получить мои кнопки для сайта!" слева увидите - просмотр предварительного результата.

" data-title="">

.button { border-top: 1px solid #96d1f8; background: #0078a5; background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); background: -moz-linear-gradient(top, #00adee, #0078a5); background: -ms-linear-gradient(top, #00adee, #0078a5); background: -o-linear-gradient(top, #00adee, #0078a5); padding: 5px 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); text-shadow: rgba(0,0,0,.4) 0 1px 0; color: #d9eef7; font-size: 14px; font-family: Arial, Helvetica, sans-serif; text-decoration: none; vertical-align: middle; } .button:hover { color: #dbdbdb; background: #00678e; background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); background: -moz-linear-gradient(top, #0095cc, #00678e); background: -ms-linear-gradient(top, #0095cc, #00678e); background: -o-linear-gradient(top, #0095cc, #00678e); } .button:active { border-top-color: #00adee; background: #00adee; }