Loading





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

eTXT




Анкетка


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



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


В примере №4 мы сделаем скольжение кнопки с неким дополнительным сообщением, как и в предыдущем примере, но, сделаем это по горизонтали и с правой стороны. Кажется, будто кнопка открывает спрятанное внутри сообщение.

Демо-пример

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

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 подписка подписка