Loading





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

eTXT




Анкетка


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



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


В этом примере мы будем использовать шрифт символов (папка websymbols) для создания иконок. Идея состоит в том, чтобы при наведении курсора мыши значок иконки исчезал ​​и появлялась стрелка анимации. При нажатии в области кнопки (а не на ссылки или иконки) и удержании клавиши мыши, кнопка меняет цвет и приобретает небольшую объёмность.

Демо-пример Исходники (147 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.


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

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

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


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


<a href="#" class="a-btn">
<span class="a-btn-symbol">Z</span>
<span class="a-btn-text">Скачать сейчас</span> 
<span class="a-btn-slide-text">Windows XP</span>
<span class="a-btn-slide-icon"></span>
</a>
		 			
<a href="#" class="a-btn">
<span class="a-btn-symbol">i</span>
<span class="a-btn-text">Скачать сейчас</span> 
<span class="a-btn-slide-text">Windows Vista</span>
<span class="a-btn-slide-icon"></span>
</a>
		 			
<a href="#" class="a-btn">
<span class="a-btn-symbol">X</span>
<span class="a-btn-text">Скачать сейчас</span> 
<span class="a-btn-slide-text">Windows 7</span>
<span class="a-btn-slide-icon"></span>
</a>
		 			
<a href="#" class="a-btn">
<span class="a-btn-symbol">k</span>
<span class="a-btn-text">Скачать сейчас</span> 
<span class="a-btn-slide-text">Windows 8</span>
<span class="a-btn-slide-icon"></span>
</a>
				


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

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

Переходим к шестому варианту.




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




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







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