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

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

ОБСУЖДЕНИЕ

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

Оригинальные кнопки с помощью css3
Просмотров: 2121  Скачан: 221 раз  Комментариев в теме: 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, при наведении на иконку, она плавно прокручивается, одновременно с анимацией иконки, плавно появляется подпись....

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

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

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

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

Резиновые кнопки на css3 (Checkbox)Резиновые кнопки на css3 (Checkbox)

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

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном...

Красивая кнопка на css3, анимация фона происходит при наведении курсора на кнопку....

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

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

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

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

Форма обратной связи с админкой PHP, JS, CSS, MySQL, AJAXФорма обратной связи с админкой PHP, JS,...

Универсальная форма обратной связи написанная на PHP, JS, CSS, MySQL, AJAX. Форма довольно гибкая в возможностях, с помощью админки......

Инфо-сетка на css и jquery «Grid accordion»Инфо-сетка на css и jquery «Grid accordi...

Стильный аккордеон в сетку хорошо подойдёт для интернет магазина....

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

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

Шаблон EnvisionШаблон Envision

Качественный HTML шаблон Envision, на главной странице располагается красивый слайдер, есть галерея, контактная форма, табы, набор кнопок......

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

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

Вертикальное меню с прокруткойВертикальное меню с прокруткой

Меню довольно простое, весит очень мало, подойдёт сайту любой тематики......

HTML шаблон ImagoHTML шаблон Imago

Современный бизнес шаблон HTML с превосходным дизайном, который представлен в 16 различных шаблонах....
  • Текущий 1.25/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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