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
Просмотров: 1820  Скачан: 210 раз  Комментариев в теме: 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 (Checkbox)Резиновые кнопки на css3 (Checkbox)

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

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

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

Mega Web Buttons PackMega Web Buttons Pack

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

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

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

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

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

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

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

Кнопка с ценником на css3Кнопка с ценником на css3

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......
Интересные публикации:

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

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

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

4Images 1.7.11 RUS4Images 1.7.11 RUS

Это отличная фото-галерея с довольно сильным функционалом....

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

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

Галерея на PHP и JqueryГалерея на PHP и Jquery

Галерея на php и jquery. PHP даёт некие привилегии перед обычным html кодом, например вам как правило приходиться...

Социальные иконки на css3Социальные иконки на css3

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

JQuery плагин с навигацией в виде слайдераJQuery плагин с навигацией в виде слайде...

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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