| ||||||
|
Кнопки с анимацией на 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, которая должна находиться в одной директории с файлом страницы, где расположены кнопки. И, наконец, рассмотрим последний, седьмой вариант. Перейдите на следующую страницу. |
|||||
|