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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

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

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

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

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

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Infinite...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...

Слайдер картинок на JqueryСлайдер картинок на Jquery

Отличный слайдер картинок для вашего сайта с поддержкой слайд-шоу, также в слайдере имеются две кнопки......

Шаблон Desire Night ClubШаблон Desire Night Club

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

Горизонтальное выпадающее меню на cssГоризонтальное выпадающее меню на css

Выпадающее меню в темном стиле, реализованное полностью на css...

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

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

In Admin PanelIn Admin Panel

Неплохой html шаблон панели администратора, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

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

Отличное горизонтальное меню с большое количество пунктов....
  • Текущий 1.25/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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