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

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

ОБСУЖДЕНИЕ

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

Кнопки для вашего сайта на css3
Просмотров: 888  Скачан: 179 раз  Комментариев в теме: 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, при наведении курсора на кнопку, она изменяет свой вид (растягивается, округляется, перекручивается)....

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

Pack кнопок №3 на css3, в пак вошло около 70 кнопок разного размера, цвета (круглые, прямоугольные, градиентные)....

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

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

стильные кнопки css3Стильные кнопки css3

В данном примере представлены красивые кнопки для сайта реализованные на чистом css3....

Mega Web Buttons PackMega Web Buttons Pack

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

Социальная панель на css3Социальная панель на css3

Красивая раскрывающиеся социальная панель на css3 с использованием иконических шрифтов. При наведении курсора на значок, происходит раскрытие панели, ...

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

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

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

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

WebDesignWebDesign

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

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css3

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....

Lotus Flower v1.2Lotus Flower v1.2

Lotus Flower - это современный универсальный шаблон для WordPress с адаптивной вёрсткой и большим функционалом....

Социальное меню с подписью на css3Социальное меню с подписью на css3

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

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

Эффект в виде слайда, реализован с помощью javascript...

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

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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