Loading





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

eTXT




Анкетка


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



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


Красивые, стильные кнопки на CSS. Для их создания применено три фоновых изображения. Пути к изображениям прописаны в стилях. При наведении курсора мыши кнопка реагирует изменением фона и размера основного сообщения, смещаясь влево и открывая дополнительное сообщение.

Демо-пример Исходники (6.3 Кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.


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

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

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


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


<div class='buttonsaveload'><a href="#" title="Демо" id="demo" target="_blank">
		<span class="btn-title">ДЕМО</span>		
		<div class="btn-info">
			<p>Посмотреть<br>пример</p>
		</div>
	</a> 
		<a href="#" title="Скачать" id="down" target="_blank">
				<span class="btn-title">СКАЧАТЬ</span>		
				<div class="btn-info">
					<p>Исходники<br>27 Кб</p>
				</div>
			</a>
			</div>

Если Вам необходимо вставить только ОДНУ кнопку (например, ДЕМО), воспользуйтесь таким кодом:


<div class='buttonsaveload btncenter'>
<a href="#" title="Демо" id="demo" target="_blank">
<span class="btn-title">ДЕМО</span>		
<div class="btn-info"><p>Посмотреть<br>пример</p></div></a> 
</div>

Здесь, как Вы уже поняли, добавлен идентификатор btncenter, значения которого Вы сможете изменять в CSS, добиваясь корректного расположения одиночной кнопки на странице сайта:


.btncenter{
	padding-left:180px;
}



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

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

Спасибо за внимание. Будьте здоровы! Посещайте мой сайт. Пока! L.M.




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




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







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