/ Ваше разрешение экрана: px / Ваш Ip адрес: {ip}

Shop Scripts

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

3-06-2018, 21:49
Данные кнопки предназначены преимущественно для светлого дизайн сайта и смотрятся очень красиво, в основном для белого фона и с преобладанием других оттенков цвета. Установка не сложная и каждый, даже начинающий вебмастер, может установить этот код. В скрипте нет не одной сторонней ссылки, создано чисто на стилях, а значит красиво.

В 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">HI-CD.BY</button>

HI-CD.BY - текст, который отображается на кнопке, измените на свой.

Нашли ошибку?
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Рекомендуем Вам зарегистрироваться или войти на сайт под своим логином, чтобы полноправно пользоваться сайтом и иметь доступ ко всем материалам.
Категория: Графика, Дизайн

Важно: если не отображается страница новости или ее часть просьба отключить блокировщик рекламы. Проблема может возникать из-за того что скрипт сайта реагирует на программы подобного типа.
Также Вы можете сообщить о проблеме или ошибке и ознакомиться с ответами пользователей.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Докажите, что Вы не Робот: *
Это интересно
Поиск и оплата штрафов ГИБДД/Налогов/Исполнительных производств
Новости Портала

Курс программирования на Python 3.6 для любого уровня с упором на практику (2019) PCRec

Вы создадите Telegram-бота на первом же уроке. Познакомитесь с основами data science и веб-разработки. Напишете собственный проект.

Основы Биоэнергетики (2019) WEBRip

Центр Эллариум является проекцией архаичных цивилизаций Магов Воды. В рамках нашей лаборатории идет воссоздание известных ранее технологий программирования энерго-информационных полей в рамках ...

Медитация. Исцеление женской судьбы (2013-2014) WEBRip

Во время этой медитации Вы попадете в женское пространство. Здесь Вы сможете осознать, что сдерживает Вас на пути к собственному счастью и освободиться от этого. Вы получите ключ Благословения от ...
Реклама Партнеров
Поддержите проект
Статистика

 
Скрипт социальных кнопок