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

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

ОБСУЖДЕНИЕ

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

Градиентные кнопки на css3
Просмотров: 1131  Скачан: 182 раз  Комментариев в теме: 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Круглая кнопка с анимационным фоном...

Красивая кнопка на css3, анимация фона происходит при наведении курсора на кнопку....

Социальные кнопки на CSSСоциальные кнопки на CSS

Стильные кнопки социальных сетей (Facbook, Twitter, Google+) с применением иконических шрифтов....

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

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

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

В сборку вошли 12 неплохих кнопок на css. Кнопки работают в браузерах OPERA, Firefox, Chrome, IE....

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

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

Сборка кнопок на cssСборка кнопок на css

Лёгкая подборка кнопок на css, в подборку вошли восемь разных кнопок созданных с помощью css....

Блок на CSS3 c эффектом 3D трансформацииБлок на CSS3 c эффектом 3D трансфор...

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

Таблица тарифных плановТаблица тарифных планов

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

Широкоформатный слайдер (видео, изображение, текст)Широкоформатный слайдер (видео, изображе...

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

Горизонтальное меню на jQuery «Slick Menu»Горизонтальное меню на jQuery «Slick Men...

Меню в довольно интересном стиле, меню раскидано в виде картинок, при наведении курсора мыши на картинку......

Текстовый слайдерТекстовый слайдер

Простой текстовый слайдер с прокруткой влево, вправо, не плохо подойдёт для вывода кратких новостей. Имеется три вида слайдера...

FlavorFlavor

Flavor - это мощная тема для wordpress которая укомплектована огромным функционалом и включает в себя все возможности для организации полноценного ин...

Max Mag v1.0.9Max Mag v1.0.9

Max Mag - это адаптивный широкоформатный шаблон для WordPress....

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

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......
  • Текущий 1.29/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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