Loading





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

eTXT




Анкетка


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



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


В последнем, седьмом примере с помощью только лишь CSS мы создадим 3D-кнопки за счет использования тени. В отличии от шести предыдущих вариантов, в этом не будут применены изображения. Так же, как и в пятом варианте, для создания иконок мы будем использовать шрифт символов (папка websymbols).

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

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


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

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

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


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


<a href="#" class="a-btn">
<span class="a-btn-symbol">J​</span>
<span class="a-btn-text">Скачать сейчас</span> 
<span class="a-btn-slide-text">Windows Vista / Windows 7</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 / Windows 7</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 Vista / Windows 7</span>
</a>
					
<a href="#" class="a-btn">
<span class="a-btn-symbol">S​</span>
<span class="a-btn-text">Скачать сейчас</span> 
<span class="a-btn-slide-text">Windows Vista / Windows 7</span>
</a>

На этом всё. Мы рассмотрели вопрос создания семи вариантов анимированных кнопок. Надеюсь, что урок Вам понравился и всё было понятно. Спасибо за внимание. Посещайте мой сайт. Пока! L.M.




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




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







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