Loading





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

eTXT




Анкетка


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



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


В этом примере мы попытаемся сделать нечто совершенно другое. Кнопка будет расширяться вниз при наведении курсора мыши и показывать в отдельном цветовом поле ещё одно сообщение. Значок стрелки при этом будет слегка поворачиваться. Сама кнопка приобретает некоторый эффект объёмности за счет малозаметных теней.

Демо-пример

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

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

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


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


<a href="#" class="a-btn">
<span class="a-btn-text">Поиск работы</span> 
<span class="a-btn-slide-text">Регистрация</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
		 			
<a href="#" class="a-btn">
<span class="a-btn-text">Создать аккаунт</span>
<span class="a-btn-slide-text">Регистрация</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
		 				
<a href="#" class="a-btn">
<span class="a-btn-text">Стать участником</span>
<span class="a-btn-slide-text">Бесплатно!</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
		 			
<a href="#" class="a-btn">
<span class="a-btn-text">Присоединяйтесь</span>
<span class="a-btn-slide-text">Регистрация</span>
<span class="a-btn-icon-right"><span></span></span>
</a>



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

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

Переходим к четвёртому варианту.




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




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







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