Вход в личный кабинет   Зарегистрировать аккаунт

Красивые кнопки для сайта uCoz

Опубликовано 25-05-2013, 21:22 в разделе Кнопки uCoz

Красивые кнопки для сайта uCoz

 

Если Вы ищите красивые кнопки для своего сайта, стоит обратить внимание на приведенный ниже код. Предлагается код на CSS3, позволяющий создать очень красивые раздвижные кнопки. Код легко редактируется и подгоняется под свои нужды. Демо-пример можно просмотреть в любом HTML редакторе.




Установка !

1) Там где хотите видеть кнопку этот код !

<div class="button"><a href="#">Скачать</a><p class="top">нажмите чтобы скачать</p><p class="bottom">12MB .zip</p></div>


2) Это в 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;}



Все просто, удачи !

» » Красивые кнопки для сайта uCoz
Опубликовал Татьяна   Прочитано (раз): 651   |   Оставлено комментариев: 0
Добавить свой комментарий