» »

Скрипт красивые кнопки как на 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.10.2013 Просмотров: 965 Комментарий: (0)

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

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

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