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

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

ОБСУЖДЕНИЕ

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

Кнопки для вашего сайта на css3
Просмотров: 940  Скачан: 188 раз  Комментариев в теме: 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 (Checkbox)Резиновые кнопки на css3 (Checkbox)

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

Социальные иконки на css3Социальные иконки на css3

Социальные иконки на css3, при наведении курсора на иконку, она делается полупрозрачной....

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

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

Радиоактивные кнопкиРадиоактивные кнопки

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

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

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

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

Pack кнопок 2, в паке представлены 20 кнопок на css3 с разными иконками....
Интересные публикации:

Оригинальное горизонтальное менюОригинальное горизонтальное меню

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

World WideWorld Wide

WorldWide - это премиум тема wordpress для сайтов новостной и журнальной тематики с поддержкой плагина WPML и WooCommerce....

Music v1.4.3Music v1.4.3

Music - это шаблон музыкального портала для wordpress с уникальным набором функций и настроек....

ElliotElliot

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

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

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

Футер на cssФутер на css

Красивый и в тоже время довольно оригинальный футер на css, он же подвал сайта....

Прозрачная контактная форма на css3Прозрачная контактная форма на css3

Прозрачная контактная форма на CSS3 в тёмном стиле. В форме реализована проверка полей......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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