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

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

ОБСУЖДЕНИЕ

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

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

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

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

Оригинальные кнопки с помощью css3Оригинальные кнопки с помощью css3

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

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....

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

Pack стильных кнопок на css3, в паке представлены восемь кнопок разного размера и цвета....

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

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

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

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

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

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

Компактный новостной Rotator на jqueryКомпактный новостной Rotator на jquery

Если вам нужно вывести новости на вашем сайте, и вы хотите что бы это было привлекательно и в тоже время компактно......

Стильный комплект форм «Zi-4-Forms»Стильный комплект форм «Zi-4-Forms»

Zi-4-Forms - это комплект форм использующий CSS3, комплект состоит с формы входа, регистрации, восстановления пароля, контактная форма....

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

Меню с красивым эффектом, суть в том, когда вы перемешаете курсор мыши по навигации, ползунок будет плавно......

Обратная связь на JQuery, PHP и MySQLОбратная связь на JQuery, PHP и MySQL

Красивая форма обратной связи на PHP/JQuery и MySQL. В форме реализована проверка полей, сообщение об ошибке и база данных для хранения присылаемых ва...

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....

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

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

Sell v1.4.1Sell v1.4.1

Sell - это ещё одна довольно гибкая универсальная тема для создания интернет магазина на WordPress с использованием WooCommerce....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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