ZorNet.Ru — сайт для вебмастера » Графика для сайта » Темно зеленая кнопка скачать

Темно зеленая кнопка скачать

Темно зеленая кнопка скачать
По своему дизайну светло зеленый цвет и темный оттенок очень гармонируют по дизайну. То что и учел дизайнер создавая эту кнопку скачать. На ней написано сколько весит файл что очень важно. Не надо писать, код сам выдаст цифру. По своему дизайну выполнена оригинально. По установке не сложно ее поставить.
Установка:
Там где хотите разместить эту кнопку, основном это вид материала и комментариев к нему у файлов ставят такие коды на скачивание.
Код
<div class="button">  
  <a href="#">Скачать</a>  
  <p class="top">нажмите чтобы скачать</p>  
  <p class="bottom">12MB .zip</p>  
  </div>

Этот стиль выводим в CSS
Код
.button {  
  width: 200px;  
  margin: 150px auto;  
}  

.button a {  
  display: block;  
  height: 50px;  
  width: 200px;  
   
  /*ТИП*/  
  color: white;  
  font: 17px/50px Helvetica, Verdana, sans-serif;  
  text-decoration: none;  
  text-align: center;  
  text-transform: uppercase;  
   
  /*ГРАДИЕНТ*/  
  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, 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);  
}  

p {  
  background: #222;  
  display: block;  
  height: 40px;  
  width: 180px;  
  margin: -50px 0 0 10px;  
   
  /*ТИП*/  
  text-align: center;  
  font: 12px/45px Helvetica, Verdana, sans-serif;  
  color: #fff;  
   
  /*ПОЛОЖЕНИЕ*/  
  position: absolute;  
  z-index: -1;  
   
  /*ПЕРЕХОД*/  
  -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;  
}
20 Мая 2013 Просмотров: 2580 Комментариев: (3)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 3
noavatar
newkeksik 22 Октября 2013 19:141
0
Он мне пишет $COUNTER$ код используется более одного раза. что делать?
๖ۣۜInspire
๖ۣۜInspire 22 Октября 2013 19:222
0
посмотри верх или низ сайта найди там этот код и удали
Kosten
Kosten 22 Октября 2013 20:223
0
Основном в низ сайта он расположен.
avatar