qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

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

Градиентные кнопки на css3
Просмотров: 1339  Скачан: 230 раз  Комментариев в теме: 0

Красивые градиентные кнопки на css3 для вашего сайта. Дизайн кнопки представлен в круглом стиле и разного цвета. Градиентные кнопки будут отлично работать во всех соврименных браузерах.

Шаг 1 - создание разметки

 

HTML

<div>
    <br /><br />
    <a href="#" class="button black">Rectangle</a>
    <a href="#" class="button black bigrounded">Rounded</a>
    <a href="#" class="button black medium">Medium</a>
    <a href="#" class="button black small">Small</a>
    <br /><br />
</div>

<div>
    <a href="#" class="button gray">Gray</a> 
    <a href="#" class="button gray bigrounded">Rounded</a> 
    <a href="#" class="button gray medium">Medium</a> 
    <a href="#" class="button gray small">Small</a> 
    <br /><br />
</div>

<div>
    <a href="#" class="button white">White</a> 
    <a href="#" class="button white bigrounded">Rounded</a> 
    <a href="#" class="button white medium">Medium</a> 
    <a href="#" class="button white small">Small</a> 
    <br /><br />
</div>

<div>
    <a href="#" class="button orange">Orange</a> 
    <a href="#" class="button orange bigrounded">Rounded</a> 
    <a href="#" class="button orange medium">Medium</a> 
    <a href="#" class="button orange small">Small</a> 
    <br /><br />
</div>

<div>
    <a href="#" class="button red">Red</a> 
    <a href="#" class="button red bigrounded">Rounded</a> 
    <a href="#" class="button red medium">Medium</a> 
    <a href="#" class="button red small">Small</a> 
    <br /><br />
</div>

<div>
    <a href="#" class="button blue">Blue</a> 
    <a href="#" class="button blue bigrounded">Rounded</a> 
    <a href="#" class="button blue medium">Medium</a> 
    <a href="#" class="button blue small">Small</a> 
    <br /><br />
</div>

<div>
    <a href="#" class="button rosy">Rosy</a> 
    <a href="#" class="button rosy bigrounded">Rounded</a> 
    <a href="#" class="button rosy medium">Medium</a> 
    <a href="#" class="button rosy small">Small</a> 
    <br /><br />
</div>

<div>
    <a href="#" class="button green">Green</a> 
    <a href="#" class="button green bigrounded">Rounded</a> 
    <a href="#" class="button green medium">Medium</a> 
    <a href="#" class="button green small">Small</a> 
    <br /><br />
</div>

<div>
    <a href="#" class="button pink">Pink</a> 
    <a href="#" class="button pink bigrounded">Rounded</a> 
    <a href="#" class="button pink medium">Medium</a> 
    <a href="#" class="button pink small">Small</a> 
    <br /><br />
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />
Материалы по теме:

Резиновые кнопки на css3 (Checkbox)Резиновые кнопки на css3 (Checkbox)

Ещё один красивый чекбокс, который реалистично имитирует резиновые кнопки, ну или мягкие как их ещё называют....

Кнопка с подтекстом на css3Кнопка с подтекстом на css3

Тот же принцип действия что и в РАСКРЫВАЮЩИЕСЯ КНОПКЕ которую вы возможно уже видели, но с......

Сборка кнопок #3 на css3Сборка кнопок #3 на css3

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....

Кнопка с ценником на css3Кнопка с ценником на css3

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......

Оригинальные кнопки с помощью css3Оригинальные кнопки с помощью css3

Оригинальные кнопки на css3, при наведении курсора на кнопку, она изменяет свой вид (растягивается, округляется, перекручивается)....

Кнопки для вашего сайта на css3Кнопки для вашего сайта на css3

Неплохие кнопки для вашего сайта на css3, кнопки разного цвета и размера (голубой, розовый, зелёный, оранжевый)....

стильные кнопки css3Стильные кнопки css3

В данном примере представлены красивые кнопки для сайта реализованные на чистом css3....
Интересные публикации:

Аккордеон на css3 и jqueryАккордеон на css3 и jquery

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....

Сборка кнопок #3 на css3Сборка кнопок #3 на css3

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....

Скроллер картинокСкроллер картинок

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

Слайдер (слайд-шоу) на css и jqueryСлайдер (слайд-шоу) на css и jquery

Довольно простой слайдер с предусмотренным слайд-шоу, если вам нужно, что-то простое, без каких либо наворотов (дополнительных панелей, кнопок и т.д)...

Форма обратной связи на PHP, AJAX, JSФорма обратной связи на PHP, AJAX, JS

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

Галерея на PHP и JqueryГалерея на PHP и Jquery

Галерея на php и jquery. PHP даёт некие привилегии перед обычным html кодом, например вам как правило приходиться...

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....
  • Текущий 1.22/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.2/5( Голосов 9 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить