Loading





Форекс с Альпари

eTXT




Анкетка


Кнопки с анимацией на CSS3 (вариант №2)



Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.


Второй пример очень похож на первый, но здесь добавлены несколько другие эффекты. При наведении курсора мыши картинка просто меняется на ценовую шкалу. Активное состояние стрелки будет таким же, как и в предыдущем примере, только изменен цвет. В дополнение ко всему, при нажатии кнопки мыши стрелка будет вращаться на 360 градусов.

Демо-пример

Установка на сайт

1. Код в таблице внизу вставить в раздел head или файл стилей сайта:

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.


2. А этот код скопируйте и расположите в разделе body в том месте, где желаете видеть кнопку / кнопки:


<a href="#" class="a-btn">
<span class="a-btn-slide-text">$29</span>
<img src="images/5.png" alt="Скачать">
<span class="a-btn-text"><small>Зарегистрироваться и</small> Скачать</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/6.png" alt="Скачать">
<span class="a-btn-text"><small>Зарегистрироваться и</small> Скачать</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/7.png" alt="Скачать">
<span class="a-btn-text"><small>Зарегистрироваться и</small> Скачать</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/8.png" alt="Скачать">
<span class="a-btn-text"><small>Зарегистрироваться и</small> Скачать</span> 
<span class="a-btn-icon-right"><span></span></span>
</a>



Используемые изображения:
Изображение
Изображение
Изображение
Изображение
Изображение

Сохраните эти изображения в папку images, которая должна находиться в одной директории с файлом страницы, где расположены кнопки.

Переходим к рассмотрению третьего варианта.




Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка