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

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

ОБСУЖДЕНИЕ

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

Кнопка с анимацией с помощью css3
Просмотров: 1540  Скачан: 236 раз  Комментариев в теме: 0

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

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

 

HTML

<div class="button-wrapper">
    <a href="#" class="a-btn">
        <span class="a-btn-slide-text">$29</span>
        <img src="images/icons/1.png" alt="Photos" />
        <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> 
        <span class="a-btn-icon-right"><span></span></span>
    </a>
    <a href="#" class="a-btn">
        <span class="a-btn-slide-text">$19</span>
        <img src="images/icons/2.png" alt="Maps" />
        <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> 
        <span class="a-btn-icon-right"><span></span></span>
    </a>
    <a href="#" class="a-btn">
        <span class="a-btn-slide-text">$24</span>
        <img src="images/icons/3.png" alt="Settings" />
        <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> 
        <span class="a-btn-icon-right"><span></span></span>
    </a>
    <a href="#" class="a-btn">
        <span class="a-btn-slide-text">$39</span>
        <img src="images/icons/4.png" alt="Wireless" />
        <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> 
        <span class="a-btn-icon-right"><span></span></span>
    </a>
</div>
<div class="button-wrapper">
    <a href="#" class="a-btn2">
        <span class="a-btn-slide-text2">$29</span>
        <img src="images/icons/5.png" alt="Photos" />
        <span class="a-btn-text2"><small>Register right now</small> Download</span> 
        <span class="a-btn-icon-right2"><span></span></span>
    </a>
    <a href="#" class="a-btn2">
        <span class="a-btn-slide-text2">$19</span>
        <img src="images/icons/6.png" alt="Maps" />
        <span class="a-btn-text2"><small>Register right now</small> Download</span> 
        <span class="a-btn-icon-right2"><span></span></span>
    </a>
    <a href="#" class="a-btn2">
        <span class="a-btn-slide-text2">$24</span>
        <img src="images/icons/7.png" alt="Settings" />
        <span class="a-btn-text2"><small>Register right now</small> Download</span> 
        <span class="a-btn-icon-right2"><span></span></span>
    </a>
    <a href="#" class="a-btn2">
        <span class="a-btn-slide-text2">$39</span>
        <img src="images/icons/8.png" alt="Wireless" />
        <span class="a-btn-text2"><small>Register right now</small> Download</span> 
        <span class="a-btn-icon-right2"><span></span></span>
    </a>
</div>

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

 

CSS

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

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

Pack кнопок №3 на css3, в пак вошло около 70 кнопок разного размера, цвета (круглые, прямоугольные, градиентные)....

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

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

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

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

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

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

Анимационная кнопка с помощью css3Анимационная кнопка с помощью css3

Красивая анимационная кнопка похожая на 3D, при наведении курсора мыши на кнопку, она плавно......

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

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

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

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

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся меню «Sc...

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

Portfolio SitePortfolio Site

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

Jquery меню горизонтальноеJquery меню горизонтальное с анимированн...

Оригинальное Jquery меню для вашего сайта с анимированным фоном, меню представлено в трёх вариантах на ваш выбор....

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

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

Многоуровневое фиксированное меню на cssМногоуровневое фиксированное меню на css

Горизонтальное многоуровневое фиксированного меню в темном стиле...

Набор элементов дизайна «CSS3 Responsive Forms Pack»Набор элементов дизайна «CSS3 Responsive...

Это профессиональный набор элементов дизайна ( кнопки, формы, Checkbox и многое другое)....

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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