Loading





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

eTXT




Анкетка


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



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


Используя огромные возможности CSS, хотелось бы поделиться с Вами некоторыми приёмами создания анимированных кнопок. Идея состоит в том, чтобы создать некоторые анимационные элементы с разными стилями. Я приведу несколько примеров и мы посмотрим, как выглядит каждый вариант.

Пожалуйста, обратите внимание, что анимация / переходы будут работать только в браузерах, которые поддерживают эти свойства CSS3.

В первом примере мы создадим большую кнопку с несколькими деталями в ней. Это будет значок, основной текст, стрелка на правой стороне и ценовая шкала, которая появится только при наведении курсора мыши.

Демо-пример

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

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

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


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


<a href="#" class="a-btn">
<span class="a-btn-slide-text">$29</span>
<img src="images/1.png" alt="Фото">
<span class="a-btn-text"><small>Доступно на Apple</small> Фото</span> 
<span class="a-btn-icon-right"><span></span></span>
</a>
	

<a href="#" class="a-btn">
<span class="a-btn-slide-text">$19</span>
<img src="images/2.png" alt="Карты">
<span class="a-btn-text"><small>Доступно на Apple</small> Карты</span> 
<span class="a-btn-icon-right"><span></span></span>
</a>
	

<a href="#" class="a-btn">
<span class="a-btn-slide-text">$24</span>
<img src="images/3.png" alt="Эмодзи">
<span class="a-btn-text"><small>Доступно на Apple</small> Эмодзи</span> 
<span class="a-btn-icon-right"><span></span></span>
</a>
   

<a href="#" class="a-btn">
<span class="a-btn-slide-text">$39</span>
<img src="images/4.png" alt="Связь">
<span class="a-btn-text"><small>Доступно на Apple</small> Связь</span> 
<span class="a-btn-icon-right"><span></span></span>
</a>



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

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

Итак, первый вариант рассмотрели, переходим дальше, ко второму варианту.




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




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







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