Хаки и Скрипты Next Generation CMS

Ставим обалденные кнопки на скачку файлов

irbees2008 irbees2008 Опубликовано - 23 - июня Кнопки и иконки
2132 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

Вот нашел обалденный вариант анимированных кнопок,и сегодня мы их поставим на ваш сайт.
И так приступим
1.Вот два блока для кнопки Скачать и кнопки Демо:

Код:
<a href="" title="Скачать" id="down">
<span class="btn-title">СКАЧАТЬ</span>
<div class="btn-info">
<p>
Скачек: 7143
<br/>
323.5 kb
</p>
</div>
</a>

<a href="" title="Демо" id="demo">
<span class="btn-title">ДЕМО</span>
<div class="btn-info">
<p>
Посмотреть<br/>
пример
</p>
</div>
</a>
2.Вот сам стиль кнопок
Код:
.content{
margin:60px auto;
width:600px;
}
#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: rgb(243,197,189); /* Old browsers */
background: -moz-linear-gradient(top, rgba(243,197,189,1) 0%, rgba(232,108,87,1) 50%, rgba(234,40,3,1) 51%, rgba(255,102,0,1) 75%, rgba(199,34,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(243,197,189,1)), color-stop(50%,rgba(232,108,87,1)), color-stop(51%,rgba(234,40,3,1)), color-stop(75%,rgba(255,102,0,1)), color-stop(100%,rgba(199,34,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(243,197,189,1) 0%,rgba(232,108,87,1) 50%,rgba(234,40,3,1) 51%,rgba(255,102,0,1) 75%,rgba(199,34,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(243,197,189,1) 0%,rgba(232,108,87,1) 50%,rgba(234,40,3,1) 51%,rgba(255,102,0,1) 75%,rgba(199,34,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(243,197,189,1) 0%,rgba(232,108,87,1) 50%,rgba(234,40,3,1) 51%,rgba(255,102,0,1) 75%,rgba(199,34,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(243,197,189,1) 0%,rgba(232,108,87,1) 50%,rgba(234,40,3,1) 51%,rgba(255,102,0,1) 75%,rgba(199,34,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 ); /* IE6-9 */
-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: rgb(211,168,165); /* Old browsers */
background: -moz-linear-gradient(top, rgba(211,168,165,1) 0%, rgba(196,90,74,1) 50%, rgba(198,29,3,1) 51%, rgba(221,92,0,1) 75%, rgba(165,24,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(211,168,165,1)), color-stop(50%,rgba(196,90,74,1)), color-stop(51%,rgba(198,29,3,1)), color-stop(75%,rgba(221,92,0,1)), color-stop(100%,rgba(165,24,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(211,168,165,1) 0%,rgba(196,90,74,1) 50%,rgba(198,29,3,1) 51%,rgba(221,92,0,1) 75%,rgba(165,24,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(211,168,165,1) 0%,rgba(196,90,74,1) 50%,rgba(198,29,3,1) 51%,rgba(221,92,0,1) 75%,rgba(165,24,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(211,168,165,1) 0%,rgba(196,90,74,1) 50%,rgba(198,29,3,1) 51%,rgba(221,92,0,1) 75%,rgba(165,24,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(211,168,165,1) 0%,rgba(196,90,74,1) 50%,rgba(198,29,3,1) 51%,rgba(221,92,0,1) 75%,rgba(165,24,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3a8a5', endColorstr='#a51800',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: 1px 0px 0 #AA1300, 0 1px 1px #AA1300;
-moz-box-shadow: 1px 0px 0 #AA1300, 0 1px 1px #AA1300;
box-shadow:1px 0px 0 #AA1300,0 1px 1px #AA1300;
}
.btn-info {
position:absolute;
height:50px;
width:230px;
top:5px;
right:4px;
-webkit-box-shadow:0 -1px 0 #CF0404, 0 1px 1px #CF0404;
-moz-box-shadow:0 -1px 0 #CF0404, 0 1px 1px #CF0404;
box-shadow:0 -1px 0 #CF0404, 0 1px 1px #CF0404;
background: rgb(207,4,4); /* Old browsers */
background: -moz-linear-gradient(top, rgba(207,4,4,1) 0%, rgba(255,48,25,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(207,4,4,1)), color-stop(100%,rgba(255,48,25,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(207,4,4,1) 0%,rgba(255,48,25,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(207,4,4,1) 0%,rgba(255,48,25,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(207,4,4,1) 0%,rgba(255,48,25,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(207,4,4,1) 0%,rgba(255,48,25,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cf0404', endColorstr='#ff3019',GradientType=0 ); /* IE6-9 */
-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;
}
3.Кому нужен исходник вот держите Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
4.Как прикрутить кнопку к аттачу я расскажу позднее

Можешь почитать и вот эту статейку "Свежие эффекты для ваших кнопок на сайте"

Опрос

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3408 дней
  • Новостей: 549
  • Комменты: 254
  • Зарегистрированно : 578
  • Онлайн всего: [8]
  • Гости: [6]
  • Поисковики: [2] Яндекс, Яндекс
  • Были сегодня : [5] Google, Яндекс, Яндекс, redflame, Яндекс
  • SQL запросов: 34
  • Генерация страницы: 0.511сек
  • Потребление памяти: 4.968 Mb 
  •   яндекс.ћетрика