Главная » Файлы » Прочие скрипты » CSS

Стильная современная анимированная кнопка "Скачать" на CSS3 для uCoz
24.06.14, 18:57:10



Отличное решение на CSS3, которое подойдёт для вашего сайта, если вы хотите украсить свою кнопочку "Скачать" и придать ей уникальный стильный внешний вид

Для начала посмотрите ДЕМО

Моё тестирование в фидле: КЛИК

Установка:

В самый низ вашего css вставляйте:
Код
.button {  
width: 200px;  
margin: 40px 0px;  
  }  
  .button a {  
display: block;  
height: 50px;  
width: 200px;  
/*TYPE*/  
color: white;  
font: 17px/50px Helvetica, Verdana, sans-serif;  
text-decoration: none;  
text-align: center;  
text-transform: uppercase;  
/*GRADIENT*/  
background: #299a0b;  
/* Old browsers */  
background: -moz-linear-gradient(top, #299a0b 0%, #299a0b 100%);  
/* FF3.6+ */  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #299a0b), color-stop(100%, #299a0b));  
/* Chrome,Safari4+ */  
background: -webkit-linear-gradient(top, #299a0b 0%, #299a0b 100%);  
/* Chrome10+,Safari5.1+ */  
background: -o-linear-gradient(top, #299a0b 0%, #299a0b 100%);  
/* Opera 11.10+ */  
background: -ms-linear-gradient(top, #299a0b 0%, #299a0b 100%);  
/* IE10+ */  
background: linear-gradient(top, #299a0b 0%, #299a0b 100%);  
/* W3C */  
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#299a0b', endColorstr='#299a0b', GradientType=0);  
/* IE6-9 */  
  }  
  .button a, .button p {  
-webkit-border-radius: 10px;  
-moz-border-radius: 10px;  
border-radius: 10px;  
-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);  
-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);  
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);  
  }  
  .button p {  
background: #222;  
display: block;  
height: 40px;  
width: 180px;  
margin: -50px 0 0 10px;  
/*TYPE*/  
text-align: center;  
font: 12px/45px Helvetica, Verdana, sans-serif;  
color: #fff;  
/*POSITION*/  
position: absolute;  
z-index: -1;  
/*TRANSITION*/  
-webkit-transition: margin 0.5s ease;  
-moz-transition: margin 0.5s ease;  
-o-transition: margin 0.5s ease;  
-ms-transition: margin 0.5s ease;  
transition: margin 0.5s ease;  
  }  
  /*HOVER*/  
.button:hover .bottom {  
margin: -10px 0 0 10px;  
  }  
  .button:hover .top {  
margin: -80px 0 0 10px;  
line-height: 35px;  
  }  
  /*ACTIVE*/  
.button a:active {  
background: #00b7ea;  
/* Old browsers */  
background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%);  
/* FF3.6+ */  
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%, #00b7ea), color-stop(100%, #009ec3));  
/* Chrome,Safari4+ */  
background: -webkit-linear-gradient(top, #00b7ea 36%, #009ec3 100%);  
/* Chrome10+,Safari5.1+ */  
background: -o-linear-gradient(top, #00b7ea 36%, #009ec3 100%);  
/* Opera 11.10+ */  
background: -ms-linear-gradient(top, #00b7ea 36%, #009ec3 100%);  
/* IE10+ */  
background: linear-gradient(top, #00b7ea 36%, #009ec3 100%);  
/* W3C */  
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b7ea', endColorstr='#009ec3', GradientType=0);  
/* IE6-9 */  
  }  
  .button:active .bottom {  
margin: -20px 0 0 10px;  
  }  
  .button:active .top {  
margin: -70px 0 0 10px;  
  }


Следующий код туда, где должна быть кнопочка "Скачать":
Код
<div class="button">  
<a href="#">Скачать</a>  
<p class="top">нажмите чтобы скачать</p>  
<p class="bottom">12MB .zip</p>  
  </div>


За основу взята ЭТА статья

Материал подготовлен Apocalypse
Категория: CSS | Добавил: Apocalypse | Теги: скачать, ucoz, на, Анимированная, кнопка, Современная, CSS3, стильная, для
Просмотров: 360 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: