Loading





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

eTXT




Анкетка


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



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


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

Демо-пример

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

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

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


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


<a href="#" class="a-btn">
<span></span>
<span>Sign up</span>
<span>It's free!</span>
</a>
					
<a href="#" class="a-btn">
<span></span>
<span>Join Now</span>		
<span>It's free!</span>
</a>
					
<a href="#" class="a-btn">
<span></span>
<span>Enter</span>	
<span>It's free!</span>
</a>
					
<a href="#" class="a-btn">
<span></span>
<span>Get in</span>
<span>It's free!</span>
</a>
				


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

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

И, наконец, рассмотрим последний, седьмой вариант. Перейдите на следующую страницу.




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




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







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