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

« назад
1
2
3
4
5
6
7
8

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

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

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

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

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

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

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


<style type="text/css">
.buttonsaveload{
	margin:20px auto;
	width:525px;
	height:60px;
}


#down,
#demo{
	position:relative;
	padding:5px;
	float:left;
	margin:10px 10px 10px 10px;
	width:230px;
	height:50px;
	display:block;
	text-decoration:none;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
span.btn-title{
	color:#fff;
	text-align:center;
	font:30px/58px Tahoma, Arial, sans-serif;
	height:50px;
	width:230px;
	display:block;
	position:relative;

	background: url(images/bg_but_n.png);
	
	
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	z-index:5;
	line-height:50px;
	-webkit-transition:width .2s ease-out;
	-moz-transition:width .2s ease-out;
	-o-transition:width .2s ease-out;
}
#down:hover span.btn-title,
#demo:hover span.btn-title {
	font-size:19px;
	width:135px;
	background: url(images/bg_but_s.png);
	-webkit-box-shadow: 1px 0px 0 #fff, 0 1px 1px #fff;
	-moz-box-shadow: 1px 0px 0 #fff, 0 1px 1px #fff;
	box-shadow:1px 0px 0 #fff,0 1px 1px #fff;
}
.btn-info {
	position:absolute;
	height:50px;
	width:230px;
	top:5px;
	right:4px;
	-webkit-box-shadow:0 -1px 0 #004e8b, 0 1px 1px #004e8b;
	-moz-box-shadow:0 -1px 0 #004e8b, 0 1px 1px #004e8b;
	box-shadow:0 -1px 0 #004e8b, 0 1px 1px #004e8b;
	background: url(images/bg_but.png);
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	z-index:4;
}
.btn-info p {
	width:70px;
	margin:12px 12px 0 0;
	position:absolute;
	right:0;
	color:#EAF5FF;
	font:11px/12px Tahoma, Arial, sans-serif;
	text-align:left;
}

.btncenter{
	padding-left:180px;
}
</style>

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.

« назад
1
2
3
4
5
6
7
8

Ваше мнение по материалу, изложенному на сайте

Служба поддержки