RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

Кнопки для вашего сайта на css3
Просмотров: 982  Скачан: 190 раз  Комментариев в теме: 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" />
Материалы по теме:

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

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

Mega Web Buttons PackMega Web Buttons Pack

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

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

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

Красивые кнопки на css3Красивые кнопки на css3

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

Сборка социальных кнопок на css3Сборка социальных кнопок на css3

Неплохая сборка социальных кнопок на css3, к кнопкам применён иконический шрифт....

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

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

VIP кнопка на css3VIP кнопка на css3

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

Горизонтальное анимированое меню с помощью JQueryГоризонтальное анимированое меню с помощ...

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

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

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

Admin PanelAdmin Panel

Шаблон для панели администратора созданный на HTML5, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

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

Прозрачная контактная форма на CSS3 в тёмном стиле. В форме реализована проверка полей......

Галерея на jQueryГалерея на jQuery

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

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

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

Вертикальное меню на css (Аккордеон)Вертикальное меню на css (Аккордеон)

Вертикальное меню аккордеон на css, хорошо подойдёт сайту информационного характера......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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