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

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

ОБСУЖДЕНИЕ

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

Оригинальные кнопки с помощью css3
Просмотров: 1645  Скачан: 199 раз  Комментариев в теме: 0

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

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

 

HTML

<div class="container">
    <div class="button-row">
        <a href="#" class="button rounded gray effect-1">Большая CSS3 кнопка</a>
    </div> 
    <div class="button-row">
        <a href="#" class="button square blue effect-2">Кнопка</a>
        <a href="#" class="button square green effect-2">Кнопка</a>
        <a href="#" class="button square red effect-2">Кнопка</a>
    </div>  
    <div class="button-row">
        <a href="#" class="button rounded blue effect-3">Кнопка</a>
        <a href="#" class="button rounded green effect-3">Кнопка</a>
        <a href="#" class="button rounded red effect-3">Кнопка</a>
    </div>
    <div class="button-row">
        <a href="#" class="button shape-1 blue effect-4">Кнопка</a>
        <a href="#" class="button shape-1 green effect-4">Кнопка</a>
        <a href="#" class="button shape-1 red effect-4">Кнопка</a>
    </div> 
    <div class="button-row">
        <a href="#" class="button shape-2 blue effect-5">Кнопка</a>
        <a href="#" class="button shape-2 green effect-5">Кнопка</a>
        <a href="#" class="button shape-2 red effect-5">Кнопка</a>
    </div> 
    <div class="button-row">
        <a href="#" class="button rounded blue effect-5">Кнопка</a>
        <a href="#" class="button square green effect-4">Кнопка</a>
        <a href="#" class="button shape-1 red effect-3">Кнопка</a>
    </div>
</div>

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

 

CSS

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

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

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

Социальные кнопки с помощью cssСоциальные кнопки с помощью css

Социальные кнопки с применением иконического шрифта....

Mega Web Buttons PackMega Web Buttons Pack

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

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

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

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

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

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

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

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

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

GridoGrido

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

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

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

KroftKroft

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть возможность менять фон сайта непосредственно на странице......

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......

Блок на CSS3 c эффектом 3D трансформацииБлок на CSS3 c эффектом 3D трансформации

Блок реализован с помощью css3 и использует 3D трансформацию для изменения своего вида....

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

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

Super Changer v2.1Super Changer v2.1

SuperChanger - это адаптивный журнальный шаблон для wordpress. Основным преимуществом шаблона является разнообразие цветовых стилей оформления......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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