» »

Стильная кнопка скачать создана на CSS3

Стильная кнопка скачать создана на CSS3

Применение данной кнопки возможно где угодно и как угодно. Текст меняем на свой, по усмотрению, цвета думаю тоже все поймут где менять. Установка так же очень проста. Ставим в любое место или можем заменить стандартные ссылки на странице материала и комментариев к нему. Стильная кнопка Скачать/Download на CSS3 c градиентом и анимацией на transition.

Установка:

Разметка

Код
<a href="http://zornet.ru/" target="_blank" class="a-btn">  
<span class="a-btn-text">Скрипты uCoz</span>  
<span class="a-btn-slide-text">ZORNET.RU</span>  
<span class="a-btn-icon-right"><span></span></span>  
</a>


CSS код

Код
.a-btn{  
  background:#80a9da;  
  background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));  
  background:-webkit-linear-gradient(top, #87cef8 0%, #47a3da 100%);  
  background:-moz-linear-gradient(top, #87cef8 0%, #47a3da 100%);  
  background:-o-linear-gradient(top, #87cef8 0%, #47a3da 100%);  
  background:linear-gradient(top, #87cef8 0%, #47a3da 100%);  
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );  
  padding-left:20px;  
  padding-right:80px;  
  height:38px;  
  display:inline-block;  
  position:relative;  
  border:1px solid #5d81ab;  
  -webkit-border-radius:5px;  
  -moz-border-radius:5px;  
  border-radius:5px;  
  float:left;  
  clear:both;  
  margin:5px 0px;  
  overflow:hidden;  
  -webkit-transition:all 0.3s linear;  
  -moz-transition:all 0.3s linear;  
  -o-transition:all 0.3s linear;  
  transition:all 0.3s linear;  
}  
.a-btn-text{  
  padding-top:5px;  
  display:block;  
  font-size:18px;  
  white-space:nowrap;  
  color:#fff;  
  -webkit-transition:all 0.2s linear;  
  -moz-transition:all 0.2s linear;  
  -o-transition:all 0.2s linear;  
  transition:all 0.2s linear;  
}  
.a-btn-slide-text {  
  position:absolute;  
  height:100%;  
  top:0px;  
  right:52px;  
  width:0px;  
  background:#63707e;  
  text-shadow:0px -1px 1px #363f49;  
  color:#fff;  
  font-size:18px;  
  white-space:nowrap;  
  text-transform:uppercase;  
  text-align:left;  
  text-indent:10px;  
  overflow:hidden;  
  line-height:38px;  
  -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;  
  -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;  
  box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;  
  -webkit-transition:width 0.3s linear;  
  -moz-transition:width 0.3s linear;  
  -o-transition:width 0.3s linear;  
  transition:width 0.3s linear;  
}  
.a-btn-icon-right {  
  position:absolute;  
  right:0px;  
  top:0px;  
  height:100%;  
  width:52px;  
  border-left:1px solid #5d81ab;  
  -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;  
  -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;  
  box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;  
}  
.a-btn-icon-right span {  
  width:38px;  
  height:38px;  
  opacity:0.7;  
  position:absolute;  
  left:50%;  
  top:50%;  
  margin:-20px 0px 0px -20px;  
  background:transparent url(../icon/arrow-right.png) no-repeat 50% 50%;  
  background-size:20px;  
  -webkit-transition:all 0.3s linear;  
  -moz-transition:all 0.3s linear;  
  -o-transition:all 0.3s linear;  
  transition:all 0.3s linear;  
}  
.a-btn:hover {  
  padding-right:180px;  
  -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);  
  -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);  
  box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);  
}  
.a-btn:hover .a-btn-text{  
  text-shadow:0px 1px 1px #5d81ab;  
  color:#fff;  
}  
.a-btn:hover .a-btn-slide-text{  
  width:100px;  
}  
.a-btn:hover .a-btn-icon-right span{  
  opacity:1;  
}  
.a-btn:active{  
  position:relative;  
  top:1px;  
  background:#5d81ab;  
  -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;  
  -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;  
  box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;  
  border-color:#80a9da;  
}


Здесь представлена Демонстрация на материал.
10.11.2016 Просмотров: 1065 Комментарий: (18)

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

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

Комментарий: 18
Kolinkor
Kolinkor 11.11.2016 10:391
0
Не пойму, а для чего она вообще нужна, и где эту кнопку можно поставить?
iMadeas
iMadeas 11.11.2016 11:072
+1
Где угодно. Была бы фантазия. На юкозе полно условных операторов...
Kosten
Kosten 11.11.2016 11:193
0
Просто сегодня сделаю демонстрацию и все будет понятно.
iMadeas
iMadeas 11.11.2016 11:224
+1
Просто не стал выкладывать дабы избежать рекламы. По сути демонстрация и не нужна. А применений действительно может быть сколько угодно.
Самое простое применение - каталог файлов юкоз - (название кнопки - "скачать(с сервера)", а при наведении(для выезжающей части) можно указать размер файла.
Kosten
Kosten 11.11.2016 11:385
0
Демку прописал в самом материале.
iMadeas
iMadeas 11.11.2016 11:426
0
Разметка пропала из материала...
Kosten
Kosten 11.11.2016 11:527
0
Исправил, просто у меня теперь каждый раз нужно подключать "Задать индивидуальные Title, Description, Keywords" хотя как купил, по умолчанию стояло.
Kosten
Kosten 11.11.2016 13:138
0
Вообщем в демонстраций, не до конца открывается, но как понимаете, все настраивать нужно, но главное все работает, и это как demo там и подчеркнутое, не стал убирать, у кого на сайте нет, то и не будет на кнопке.

Если что iMadeas может скинуть демонстрацию, где не подчеркнуто, но вообщем поняли, все работает, настраиваем сами, если кто не может, пишем, будем изучать и разбираться с этой непоняткой. 11a
Webmaster32
Webmaster32 11.11.2016 19:139
0
Забрал себе пригодится, для ссылок скачивания со сторонних сервисов. 04b
Kolinkor
Kolinkor 11.11.2016 20:0710
0
Смотри ка а так нормально смотрится, а то не понять было.
1 2 »
avatar