ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Скрипт красивые кнопки как на YouTube

Скрипт красивые кнопки как на YouTube

Думаю на сайте этот был каждый если кто не был так зайдите и посмотрите какие кнопки получатся и будут стоять на вашем сайте если вы их поставите. Они как понимаете только для светлого дизайн сайта предназначены и на таких порталах смотрятся очень красиво, основном где белый свет на сайте главный и преобладает других оттенков цвета. Установка не сложная и каждый даже начинающий веб мастер может установить этот код со стилями. Хочу подчеркнуть что в скрипте нет не одной ссылки, чисто на стилях создано, а значит красиво.
И так начнем:
Первое, нужно прописать стиль в вашем CSS:

Код

.button {
border: 1px solid #DDD;
border-radius: 3px;
text-shadow: 0 1px 1px white;
-webkit-box-shadow: 0 1px 1px #fff;
-moz-box-shadow: 0 1px 1px #fff;
box-shadow: 0 1px 1px #fff;
font: bold 11px Sans-Serif;
padding: 6px 10px;
white-space: nowrap;
vertical-align: middle;
color: #666;
background: transparent;
cursor: pointer;
}
.button:hover, .button:focus {
border-color: #999;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background: -moz-linear-gradient(top, white, #E0E0E0);
background: -ms-linear-gradient(top, white, #E0E0E0);
background: -o-linear-gradient(top, white, #E0E0E0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
.button:active {
border: 1px solid #AAA;
border-bottom-color: #CCC;
border-top-color: #999;
-webkit-box-shadow: inset 0 1px 2px #aaa;
-moz-box-shadow: inset 0 1px 2px #aaa;
box-shadow: inset 0 1px 2px #aaa;
background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);
background: -moz-linear-gradient(top, #E6E6E6, gainsboro);
background: -ms-linear-gradient(top, #E6E6E6, gainsboro);
background: -o-linear-gradient(top, #E6E6E6, gainsboro);
}

Код

<button class="button" role="button">ZORNET.RU</button>

Где написано ZORNET.RU, пишем свое слово которое будит отражаться на кнопке.

08 Октября 2013 Просмотров: 2292 Комментариев: (0)

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

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

Kosten

Комментарии: 0