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

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

ОБСУЖДЕНИЕ

Кнопки для сайта на css3

Кнопки для вашего сайта на css3
Просмотров: 1002  Скачан: 195 раз  Комментариев в теме: 0

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

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

 

HTML

<div class="container">
    <a href="#" class="but white-blue small"><b>but white-blue small</b></a> 
    <a href="#" class="but white-blue-current small"><b>but white-blue-current small</b></a> <br />
    <a href="#" class="but white-blue small"><b>link</b></a> 
    <a href="#" class="but white-blue small"><b>link</b></a> 
    <a href="#" class="but white-blue small"><b>very cool button</b></a> 
    <a href="#" class="but white-blue small"><b>one</b></a> 
    <a href="#" class="but white-blue small"><b>two</b></a> 
    <a href="#" class="but white-blue small"><b>three</b></a><br />
    <a href="#" class="but white-blue small"><b>q</b></a> 
    <a href="#" class="but white-blue small"><b>w</b></a> 
    <a href="#" class="but white-blue small"><b>e</b></a> 
    <a href="#" class="but white-blue small"><b>r</b></a> 
    <a href="#" class="but white-blue small"><b>t</b></a> 
    <a href="#" class="but white-blue small"><b>y</b></a> 
    <a href="#" class="but white-blue small"><b>u</b></a> 
    <a href="#" class="but white-blue small"><b>i</b></a> 
    <a href="#" class="but white-blue small"><b>o</b></a> 
    <a href="#" class="but white-blue small"><b>p</b></a> 
<br /><br />
    <a href="#" class="but white-pink normal"><b>but white-pink normal</b></a> 
    <a href="#" class="but white-pink-current normal"><b>but white-pink-current normal</b></a> <br />
    <a href="#" class="but white-pink normal"><b>link</b></a> 
    <a href="#" class="but white-pink normal"><b>link</b></a> 
    <a href="#" class="but white-pink normal"><b>very cool button</b></a> 
    <a href="#" class="but white-pink normal"><b>one</b></a> 
    <a href="#" class="but white-pink normal"><b>two</b></a> 
    <a href="#" class="but white-pink normal"><b>three</b></a><br />
    <a href="#" class="but white-pink normal"><b>q</b></a> 
    <a href="#" class="but white-pink normal"><b>w</b></a> 
    <a href="#" class="but white-pink normal"><b>e</b></a> 
    <a href="#" class="but white-pink normal"><b>r</b></a> 
    <a href="#" class="but white-pink normal"><b>t</b></a> 
    <a href="#" class="but white-pink normal"><b>y</b></a> 
    <a href="#" class="but white-pink normal"><b>u</b></a> 
    <a href="#" class="but white-pink normal"><b>i</b></a> 
    <a href="#" class="but white-pink normal"><b>o</b></a> 
    <a href="#" class="but white-pink normal"><b>p</b></a> 
<br /><br />
    <a href="#" class="but white-green large"><b>but white-green large</b></a> 
    <a href="#" class="but white-green-current large"><b>but white-green-current large</b></a> <br />
    <a href="#" class="but white-green large"><b>link</b></a> 
    <a href="#" class="but white-green large"><b>link</b></a> 
    <a href="#" class="but white-green large"><b>very cool button</b></a> 
    <a href="#" class="but white-green large"><b>one</b></a> 
    <a href="#" class="but white-green large"><b>two</b></a> 
    <a href="#" class="but white-green large"><b>three</b></a><br />
    <a href="#" class="but white-green large"><b>q</b></a> 
    <a href="#" class="but white-green large"><b>w</b></a> 
    <a href="#" class="but white-green large"><b>e</b></a> 
    <a href="#" class="but white-green large"><b>r</b></a> 
    <a href="#" class="but white-green large"><b>t</b></a> 
    <a href="#" class="but white-green large"><b>y</b></a> 
    <a href="#" class="but white-green large"><b>u</b></a> 
    <a href="#" class="but white-green large"><b>i</b></a> 
    <a href="#" class="but white-green large"><b>o</b></a> 
    <a href="#" class="but white-green large"><b>p</b></a> 
<br /><br />
    <a href="#" class="but white-orange huge"><b>but white-orange huge</b></a> 
    <a href="#" class="but white-orange-current huge"><b>but white-orange-current huge</b></a> <br />
    <a href="#" class="but white-orange huge"><b>link</b></a> 
    <a href="#" class="but white-orange huge"><b>link</b></a> 
    <a href="#" class="but white-orange huge"><b>very cool button</b></a> 
    <a href="#" class="but white-orange huge"><b>one</b></a> 
    <a href="#" class="but white-orange huge"><b>two</b></a> 
    <a href="#" class="but white-orange huge"><b>three</b></a><br />
    <a href="#" class="but white-orange huge"><b>q</b></a> 
    <a href="#" class="but white-orange huge"><b>w</b></a> 
    <a href="#" class="but white-orange huge"><b>e</b></a> 
    <a href="#" class="but white-orange huge"><b>r</b></a> 
    <a href="#" class="but white-orange huge"><b>t</b></a> 
    <a href="#" class="but white-orange huge"><b>y</b></a> 
    <a href="#" class="but white-orange huge"><b>u</b></a> 
    <a href="#" class="but white-orange huge"><b>i</b></a> 
    <a href="#" class="but white-orange huge"><b>o</b></a> 
    <a href="#" class="but white-orange huge"><b>p</b></a> 
</div>

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

 

CSS

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

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

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

Анимационная кнопка с помощью css3Анимационная кнопка с помощью css3

Красивая анимационная кнопка похожая на 3D, при наведении курсора мыши на кнопку, она плавно......

30 анимационных кнопок на CSS330 анимационных кнопок на CSS3

Неплохие анимационные кнопки на css3, имеются 30 кнопок, в том числе и 3D....

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....

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

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

Чекбокс на css3Чекбокс на css3

Чекбокс имитирующий реалистично кнопку включения, идея в принципе неплохая, но......

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном...

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

Горизонтальное меню на cssГоризонтальное меню на css

Горизонтальное меню реализованное на css, подпункты открываются при наведении курсора......

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

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

ZeniZeni

Красивый шаблон построенный на html5 для блога или портфолио, на главной странице расположен привлекательный слайдер......

Mega Web Buttons PackMega Web Buttons Pack

Mega Pack кнопок на css, в паке собрано около 40-ка кнопок с разными иконками....

VLDPersonals v2.7VLDPersonals v2.7

VLDPersonals - это функциональный движок с огромным количеством возможностей, который вмещает в себе социальную сеть и сайт знакомств....

Контактная форма (дизайн)Контактная форма (дизайн)

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

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

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

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

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

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


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