Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

Мы собираем и публикуем материалы не только на сайте, но и в нашей группе Вконтакте, нужно отметить то, что на сайте публикуются не все материалы, небольшая часть выкладывается только в группе.

17 Марта 2014 Подробнее

Свернуть

Прямой эфир

Пользователь: artCreative

В раздел по теме: Вид материалов как на Pinterest
Пользователь: artCreative

В раздел по теме: Ссылка на источник при копировании текста
Пользователь: muxa

В раздел по теме: Ссылка на источник при копировании текста
Не работает
Пользователь: muxa

В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
Все работает класс
Пользователь: muxa

В раздел по теме: Всплывающее меню на чистом CSS
Не работает
Пользователь: muxa

В раздел по теме: Шаблон Фотошоп-Мастер
Пользователь: vovany

В раздел по теме: Уникальная страница технических работ для uCoz

Свернуть

Статистика

Пользователи

Гости сайта

Онлайн
Кто был
СЧ

[Статистика недоступна]

Всего пользователей: 1492 ⁺⁰
Всего материалов [?]: 1434 +

Полный список

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Переключатели и кнопки » Серый и синий вид кнопок на CSS3

Серый и синий вид кнопок на CSS3

Опубликовал: artCreative™
Категория: Переключатели и кнопки
Дата: 19 Июня 2025 в 02:26

0 голосов

Красивая серая кнопка «button» как на сайте ВКонтакте. Кнопка выполнена в серых и белых тонах. Установить такой стиль легко.
Таблица стилей (CSS):

Код

.button_gray {margin: 0px 10px;}
.button_gray {text-align: center;-webkit-border-radius: 2px;-khtml-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;display: inline-block;*display: inline;position: relative;line-height: normal;zoom: 1;}
.button_gray {margin: 2px 5px;}
.button_gray button {border: 1px solid;background: none;font-size: 11px;margin: 0px;cursor: pointer;white-space: nowrap;outline: none;padding: 4px 14px;*padding: 5px 15px 3px;font-family: tahoma, arial, verdana, sans-serif, Lucida Sans;overflow: visible;}
.font_medium .button_gray button {font-size: 12px;}
.button_gray button::-moz-focus-inner {border: 0;}
.button_gray {border: 1px solid #b3b3b3;background: #e0e0e0;}
.button_gray button {border-top-color: #ffffff;border-bottom-color: #e5e5e5;border-left-color: #e7e7e7;border-right-color: #e7e7e7;color: #444;text-shadow:0 1px 0 #ffffff;*border: 0;background: url(http://st0.userapi.com/images/button_vk.png) #dddddd repeat-x top;background-position: 0px -54px;}
.button_gray button:hover {background-position: 0px -46px;}
.button_gray button:active {background: #dcdcdc;border: 1px solid #dcdcdc;position:relative;}
.button_gray {background: url('http://st0.userapi.com/images/upload.gif') center no-repeat;}
a.button_gray:hover {text-decoration: none;}
/* Серый вид кнопки как в "В контакте" для uCoz от ext1on.my1.ru */

Там где хотите видеть кнопку:

Код

<div class="button_gray"><button>Кнопка</button></div>

Вид кнопки как ВКонтакте для uCoz устанавливается через таблицу стилей (CSS). Оформление кнопки «button» всем известной социальной сети ВКонтакте. Вид на 100% как на сайте vk.com! Выполнена она в синих тонах.
Таблица стилей (CSS):

Код

/* Вид кнопки как "В контакте" от ext1on.my1.ru */
.button_blue{text-align: center;-webkit-border-radius: 2px;-khtml-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;display: inline-block;*display: inline;position: relative;line-height: normal;zoom: 1;}
.button_blue button {border: 1px solid;background: none;font-size: 11px;margin: 0px;cursor: pointer;white-space: nowrap;outline: none;padding: 4px 14px;*padding: 5px 15px 3px;font-family: tahoma, verdana, arial, sans-serif, Lucida Sans;overflow: visible;}
.button_blue button::-moz-focus-inner, .button_gray button::-moz-focus-inner {border: 0;}
.button_blue {border: 1px solid #4e6f93;border-top-color: #517295;background: #5D81A7;}
.button_blue button {border-top-color: #789ABF;border-bottom-color: #5980A9;border-left-color: #5980A9;border-right-color: #5980A9;color: #FFF;text-shadow:0 1px 0 #45688E;*border: 0;background: url(http://st0.userapi.com/images/button_vk.png) #6181a6 repeat-x top;background-position: 0px -16px;*background-position: 0px -16px;}
.button_blue button:hover, .button_blue button.hover {background-position: 0px -8px;}
.button_blue button:active, .button_blue button.active {background: #5e80a5;border: 1px solid #5e80a5;position:relative;}
/* Вид кнопки как "В контакте" от ext1on.my1.ru */

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

Код

<div class="button_blue"><button id="send_post" >Отправить</button></div>

Ссылка на источник материала

Ссылка на ДЕМО

Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 1014 « Назад

Теги материала: вид, на, синий, серый, css3, кнопок

Комментарии пользователей

Внимание ! У вас нет прав для добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.

E-mail отправителя *:
Тема письма:
Текст сообщения *:

ПАНЕЛЬ УПРАВЛЕНИЯ

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Переключатели и кнопки » Серый и синий вид кнопок на CSS3

Серый и синий вид кнопок на CSS3

Комментарии пользователей