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

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

ОБСУЖДЕНИЕ

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

Градиентные кнопки на css3
Просмотров: 1502  Скачан: 246 раз  Комментариев в теме: 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 c эффектом 3D трансформацииБлок на CSS3 c эффектом 3D трансфор...

Блок реализован с помощью css3 и использует 3D трансформацию для изменения своего вида....

Набор пиктограммных кнопок на css3Набор пиктограммных кнопок на css3

Отличный набор пиктограмных кнопок с применением иконического шрифта. В наборе представлены как......

Социальные кнопки с помощью cssСоциальные кнопки с помощью css

Социальные кнопки с применением иконического шрифта....

Кнопка с анимационным фоном на css3Кнопка с анимационным фоном на css3

Отличная кнопка на css3, кнопка реально классная и удобная, да и привлекает глаза посетителя....

Оригинальные кнопки на cssОригинальные кнопки на css

Красивые кнопки, прекрасно подойдут любому сайту, все сделано на чистом css....

Набор градиентных кнопок на css3Набор градиентных кнопок на css3

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

Pack кнопок #3 на CSS3Pack кнопок #3 на CSS3

Pack кнопок №3 на css3, в пак вошло около 70 кнопок разного размера, цвета (круглые, прямоугольные, градиентные)....
Интересные публикации:

Вертикальное многоуровневое меню на css и JQueryВертикальное многоуровневое меню на css ...

Вертикальное многоуровневое меню с неограниченной вложенностью на основе jQuery....

Black and WhiteBlack and White

Black and White - современная премиум тема для wordpress в стиле минимализм и мощным функционалом....

Социальная панель на css3Социальная панель на css3

Красивая раскрывающиеся социальная панель на css3 с использованием иконических шрифтов. При наведении курсора на значок, происходит раскрытие панели, ...

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews 2.0»

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

4Images 1.7.11 RUS4Images 1.7.11 RUS

Это отличная фото-галерея с довольно сильным функционалом....

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на css3

Очень красивая и главное удобная кнопка на css3, при наведении курсора на кнопку, она......
  • Текущий 1.22/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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