Красивые кнопки Download ( Скачать ). Ничего не обычного нету, простые стильные кнопки "Download" , имеется 8 различных цветовых вариантов так что подойдет для каждого сайта. Согласитесь не каждый владеет фотошопом и даже пейнтом поэтому для новичков это кусок мяса. Выглядят эти кнопки как 3D, при наведении и нажатии на копнку их вид меняется. За счет эффекта как 3D то при нажатии на кнопку создается впечатление, как будто нажали на реальную сенсорную кнопку своим пальцем.
Установка:
Скачиваем архив и заливаем в корень сайта.
Далее выберите подходящий цвет и скопируйте что вам нужно и установите где хотите видеть кнопку:
(Это будет не трудно, как вы уже поняли цвет соответствует названию класса.)
И последнее, устанавливаем стили в вашу Таблицу стилей ( можете только нужное а можете все сразу что бы выбрать на практике ):
Установка:
Скачиваем архив и заливаем в корень сайта.
Далее выберите подходящий цвет и скопируйте что вам нужно и установите где хотите видеть кнопку:
(Это будет не трудно, как вы уже поняли цвет соответствует названию класса.)
Code
<a class="btn_teal" href="#"></a>
<a class="btn_green" href="#"></a>
<a class="btn_blue" href="#"></a>
<a class="btn_pink" href="#"></a>
<a class="btn_grey" href="#"></a>
<a class="btn_black" href="#"></a>
<a class="btn_orange" href="#"></a>
<a class="btn_purple" href="#"></a>
<a class="btn_green" href="#"></a>
<a class="btn_blue" href="#"></a>
<a class="btn_pink" href="#"></a>
<a class="btn_grey" href="#"></a>
<a class="btn_black" href="#"></a>
<a class="btn_orange" href="#"></a>
<a class="btn_purple" href="#"></a>
И последнее, устанавливаем стили в вашу Таблицу стилей ( можете только нужное а можете все сразу что бы выбрать на практике ):
Code
/* TEAL */
.btn_teal {display:block;width:82px;height:32px;background:url('/btn_dwnld/btn_teal.png'); no-repeat; position:relative;}
.btn_teal:hover {background-position:0 -32px;}
.btn_teal:active {background-position:0 -64px;}
/* ---- */
/* GREEN */
.btn_green {display:block;width:82px;height:32px;background:url('/btn_dwnld/btn_green.png'); no-repeat; position:relative;}
.btn_green:hover {background-position:0 -32px;}
.btn_green:active {background-position:0 -64px;}
/* ---- */
/* BLUE */
.btn_blue {display:block;width:82px;height:32px;background:url('/btn_dwnld/btn_blue.png'); no-repeat; position:relative;}
.btn_blue:hover {background-position:0 -32px;}
.btn_blue:active {background-position:0 -64px;}
/* ---- */
/* PINK */
.btn_pink {display:block;width:82px;height:32px;background:url('/btn_dwnld/btn_pink.png'); no-repeat; position:relative;}
.btn_pink:hover {background-position:0 -32px;}
.btn_pink:active {background-position:0 -64px;}
/* ---- */
/* GREY */
.btn_grey {display:block;width:82px;height:32px;background:url('/btn_dwnld/btn_grey.png'); no-repeat; position:relative;}
.btn_grey:hover {background-position:0 -32px;}
.btn_grey:active {background-position:0 -64px;}
/* ---- */
/* BLACK */
.btn_black {display:block;width:82px;height:32px;background:url('/btn_dwnld/btn_black.png'); no-repeat; position:relative;}
.btn_black:hover {background-position:0 -32px;}
.btn_black:active {background-position:0 -64px;}
/* ---- */
/* ORANGE */
.btn_orange {display:block;width:82px;height:32px;background:url('/btn_dwnld/btn_orange.png'); no-repeat; position:relative;}
.btn_orange:hover {background-position:0 -32px;}
.btn_orange:active {background-position:0 -64px;}
/* ---- */
/* PURPLE */
.btn_purple {display:block;width:82px;height:32px;background:url('/btn_dwnld/btn_purple.png'); no-repeat; position:relative;}
.btn_purple:hover {background-position:0 -32px;}
.btn_purple:active {background-position:0 -64px;}
/* ---- */
.btn_teal {display:block;width:82px;height:32px;background:url('/btn_dwnld/btn_teal.png'); no-repeat; position:relative;}
.btn_teal:hover {background-position:0 -32px;}
.btn_teal:active {background-position:0 -64px;}
/* ---- */
/* GREEN */
.btn_green {display:block;width:82px;height:32px;background:url('/btn_dwnld/btn_green.png'); no-repeat; position:relative;}
.btn_green:hover {background-position:0 -32px;}
.btn_green:active {background-position:0 -64px;}
/* ---- */
/* BLUE */
.btn_blue {display:block;width:82px;height:32px;background:url('/btn_dwnld/btn_blue.png'); no-repeat; position:relative;}
.btn_blue:hover {background-position:0 -32px;}
.btn_blue:active {background-position:0 -64px;}
/* ---- */
/* PINK */
.btn_pink {display:block;width:82px;height:32px;background:url('/btn_dwnld/btn_pink.png'); no-repeat; position:relative;}
.btn_pink:hover {background-position:0 -32px;}
.btn_pink:active {background-position:0 -64px;}
/* ---- */
/* GREY */
.btn_grey {display:block;width:82px;height:32px;background:url('/btn_dwnld/btn_grey.png'); no-repeat; position:relative;}
.btn_grey:hover {background-position:0 -32px;}
.btn_grey:active {background-position:0 -64px;}
/* ---- */
/* BLACK */
.btn_black {display:block;width:82px;height:32px;background:url('/btn_dwnld/btn_black.png'); no-repeat; position:relative;}
.btn_black:hover {background-position:0 -32px;}
.btn_black:active {background-position:0 -64px;}
/* ---- */
/* ORANGE */
.btn_orange {display:block;width:82px;height:32px;background:url('/btn_dwnld/btn_orange.png'); no-repeat; position:relative;}
.btn_orange:hover {background-position:0 -32px;}
.btn_orange:active {background-position:0 -64px;}
/* ---- */
/* PURPLE */
.btn_purple {display:block;width:82px;height:32px;background:url('/btn_dwnld/btn_purple.png'); no-repeat; position:relative;}
.btn_purple:hover {background-position:0 -32px;}
.btn_purple:active {background-position:0 -64px;}
/* ---- */
Источник: premiumpixels.com, ucozmania.com
