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

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

ОБСУЖДЕНИЕ

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

Кнопки с анимацией на css
Просмотров: 1345  Скачан: 213 раз  Комментариев в теме: 0

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

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

 

HTML

<div class="back">
    <div class="button_base b01_simple_rollover">Кнопка</div>
</div>
<div class="back">
    <div class="button_base b02_slide_in">
        <div>Кнопка</div>
        <div></div>
        <div>Кнопка</div>
    </div>
</div>
<div class="back">
    <div class="button_base b03_skewed_slide_in">
        <div>Кнопка</div>
        <div></div>
        <div>Кнопка</div>
    </div>
</div>
<div class="back">
    <div class="button_base b04_3d_tick">
        <div>Кнопка</div>
        <div>Кнопка</div>
    </div>
</div>
<div class="back">
    <div class="button_base b05_3d_roll">
        <div>Кнопка</div>
        <div>Кнопка</div>
    </div>
</div>
<div class="back">
    <div class="button_base b06_3d_swap">
        <div>Кнопка</div>
        <div>Кнопка</div>
    </div>
</div>
<div class="back">
    <div class="button_base b07_3d_double_roll">
        <div>Кнопка</div>
        <div>Кнопка</div>
        <div>Кнопка</div>
        <div>Кнопка</div>
    </div>
</div>
<div class="back">
    <div class="button_base b08_3d_pushback">
        <div>Кнопка</div>
        <div>Кнопка</div>
    </div>
</div>
<div class="back">
    <div class="button_base b09_electric">Кнопка</div>
</div>
<div class="back">
    <div class="button_base b10_tveffect">
        <div>Кнопка</div>
        <div>
            <div>Кнопка</div>
            <div>Кнопка</div>
            <div>Кнопка</div>
        </div>
    </div>
</div>
<div class="back">
    <div class="button_base b11_3d_jumpback">
        <div>Кнопка</div>
    </div>
</div>
<div class="back">
    <div class="button_base b12_3d_glitch">
        <div></div>
        <div>Кнопка</div>
    </div>
</div>

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

 

CSS

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

Кнопки с градиентом на css3Кнопки с градиентом на css3

Кнопки с градиентом, такие кнопки можно встретить довольно часто......

Вращающиеся кнопки на css3Вращающиеся кнопки на css3

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

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

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

Кнопка с подтекстом на css3Кнопка с подтекстом на css3

Тот же принцип действия что и в РАСКРЫВАЮЩИЕСЯ КНОПКЕ которую вы возможно уже видели, но с......

Социальная выпадающая панель на cssСоциальная выпадающая панель на css

Неплохая социальная панель, при наведении курсора мыши, панель, плавно раскрывается, за тем уже видны сами иконки....

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

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

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

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

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

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

Скрипт почтовой рассылки писем SendMailСкрипт почтовой рассылки писем

SendMail - это инструмент для организации рассылки почтовых сообщений с вашего сайта любой информации и включает в себя всё то, что нужно email-маркет...

Games ThemeGames Theme

GamesTheme - мощная игровая тема для WordPress, в тёмном оформлении, тема полностью кроссбраузерная, seo оптимизированная......

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

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

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

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

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

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

Аккордеон на css3 и jqueryАккордеон на css3 и jquery

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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