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

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

ОБСУЖДЕНИЕ

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

Градиентные кнопки на css3
Просмотров: 1418  Скачан: 240 раз  Комментариев в теме: 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" />
Материалы по теме:

Социальная выпадающая панель на cssСоциальная выпадающая панель на css

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

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

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

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

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

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

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

12 кнопок с анимацией на css312 кнопок с анимацией на css3

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....

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

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

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

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

Слайд меню с помощью css3 и JQueryСлайд меню с помощью css3 и JQuery

Креативное вертикальное меню на css3 и JQuery

Оригинальное меню в виде клочка бумагиОригинальное меню в виде клочка бумаги

Меню в оригинальном стиле, в виде потёртого клочка бумаги....

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

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

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

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

Набор плоских форм «Formicon Flat Forms Pack»Набор плоских форм «Formicon Flat Forms ...

Formicon Flat Forms Pack - это набор плоских форм, построенных на Bootstrap 3.0. Набор содержит в себе различные формы и все они имеют разные стили...

FlavorFlavor

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

Слайд эффект с помощью JavaScriptСлайд эффект с помощью JavaScript

Эффект в виде слайда, реализован с помощью javascript...
  • Текущий 1.22/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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