WebElement - Лучшие авторские скрипты для вашего сайта и блога
WebElement - это сборник дизайнерских мелочей
А также скриптов, помогающих вам в сайто-строении.
Мы поможем вам сделать сайт красивее, мобильнее и удобнее.
У нас вы можете найти готовые решения на:
HTML, CSS\CSS3, jQuery, JS, плагинам к библиотеке JQ и не только...
Используйте только качественные скрипты на своих сайтах.
Главная » Скрипты »

Изменение всех кнопок на uCoz (белый стиль)

04.08.2012 19:30

DEMOИзменение всех кнопок на uCoz (белый стиль)

Я уже писал в предыдущем посте о кнопках, используется тот же метод, а ставить код можно в любой CSS файл или в ПУ "Таблица стилей (CSS)".
Теперь посмотрим демо и код.
Code

input[type="submit"] {
  border: 1px solid #ccc!important;
  border-radius: 3px!important;
  -webkit-box-shadow: 0 0px 1px #ccc!important;
  -moz-box-shadow: 0 0px 1px #ccc!important;
  box-shadow: 0 0px 1px #ccc!important;
  font: bold 11px Sans-Serif!important;
  padding: 3px 6px!important;
  white-space: nowrap!important;
  vertical-align: middle!important;
  color: #333!important;
  background: transparent!important;
  cursor: pointer!important;
}
input[type="submit"]:hover , input[type="submit"]:focus {
  border-color: #999!important;
  background: -webkit-linear-gradient(top, #ccc, #fff)!important;
  background: -moz-linear-gradient(top, #ccc, #fff)!important;
  background: -ms-linear-gradient(top, #ccc, #fff)!important;
  background: -o-linear-gradient(top, #ccc, #fff)!important;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff!important;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff!important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff!important;
}
input[type="submit"]:active {
  border: 1px solid #AAA!important;
  border-bottom-color: #CCC!important;
  border-top-color: #999!important;
  -webkit-box-shadow: inset 0 0px 2px #aaa!important;
  -moz-box-shadow: inset 0 0px 2px #aaa!important;
  box-shadow: inset 0 0px 2px #aaa!important;
  background: -webkit-linear-gradient(top, #ccc, #ccc)!important;
  background: -moz-linear-gradient(top, #ccc, #ccc)!important;
  background: -ms-linear-gradient(top, #ccc, #ccc)!important;
  background: -o-linear-gradient(top, #ccc, #ccc)!important;
}
input[type="submit"]:disabled {
  border: 1px solid #666!important;
  border-radius: 3px!important;
  -webkit-box-shadow: 0 0px 1px #666!important;
  -moz-box-shadow: 0 0px 1px #666!important;
  box-shadow: 0 0px 1px #666!important;
  font: bold 11px Sans-Serif!important;
  padding: 3px 6px!important;
  white-space: nowrap!important;
  vertical-align: middle!important;
  color: #ccc!important;
  background: transparent!important;
}

input[type="button"] {
  border: 1px solid #ccc!important;
  border-radius: 3px!important;
  -webkit-box-shadow: 0 0px 1px #ccc!important;
  -moz-box-shadow: 0 0px 1px #ccc!important;
  box-shadow: 0 0px 1px #ccc!important;
  font: bold 11px Sans-Serif!important;
  padding: 3px 6px!important;
  white-space: nowrap!important;
  vertical-align: middle!important;
  color: #333!important;
  background: transparent!important;
  cursor: pointer!important;
}
input[type="button"]:hover , input[type="button"]:focus {
  border-color: #999!important;
  background: -webkit-linear-gradient(top, #ccc, #fff)!important;
  background: -moz-linear-gradient(top, #ccc, #fff)!important;
  background: -ms-linear-gradient(top, #ccc, #fff)!important;
  background: -o-linear-gradient(top, #ccc, #fff)!important;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff!important;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff!important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff!important;
}
input[type="button"]:active {
  border: 1px solid #AAA!important;
  border-bottom-color: #CCC!important;
  border-top-color: #999!important;
  -webkit-box-shadow: inset 0 0px 2px #aaa!important;
  -moz-box-shadow: inset 0 0px 2px #aaa!important;
  box-shadow: inset 0 0px 2px #aaa!important;
  background: -webkit-linear-gradient(top, #ccc, #ccc)!important;
  background: -moz-linear-gradient(top, #ccc, #ccc)!important;
  background: -ms-linear-gradient(top, #ccc, #ccc)!important;
  background: -o-linear-gradient(top, #ccc, #ccc)!important;
}
input[type="button"]:disabled {
  border: 1px solid #666!important;
  border-radius: 3px!important;
  -webkit-box-shadow: 0 0px 1px #666!important;
  -moz-box-shadow: 0 0px 1px #666!important;
  box-shadow: 0 0px 1px #666!important;
  font: bold 11px Sans-Serif!important;
  padding: 3px 6px!important;
  white-space: nowrap!important;
  vertical-align: middle!important;
  color: #ccc!important;
  background: transparent!important;
}
input[type="file"] {
  border: 1px solid #ccc!important;
  border-radius: 3px!important;
  -webkit-box-shadow: 0 0px 1px #ccc!important;
  -moz-box-shadow: 0 0px 1px #ccc!important;
  box-shadow: 0 0px 1px #ccc!important;
  font: bold 11px Sans-Serif!important;
  padding: 3px 6px!important;
  white-space: nowrap!important;
  vertical-align: middle!important;
  color: #333!important;
  background: transparent!important;
  cursor: pointer!important;
}
input[type="file"]:hover , input[type="file"]:focus {
  border-color: #999!important;
  background: -webkit-linear-gradient(top, #ccc, #fff)!important;
  background: -moz-linear-gradient(top, #ccc, #fff)!important;
  background: -ms-linear-gradient(top, #ccc, #fff)!important;
  background: -o-linear-gradient(top, #ccc, #fff)!important;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff!important;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff!important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff!important;
}
input[type="file"]:active {
  border: 1px solid #AAA!important;
  border-bottom-color: #CCC!important;
  border-top-color: #999!important;
  -webkit-box-shadow: inset 0 0px 2px #aaa!important;
  -moz-box-shadow: inset 0 0px 2px #aaa!important;
  box-shadow: inset 0 0px 2px #aaa!important;
  background: -webkit-linear-gradient(top, #ccc, #ccc)!important;
  background: -moz-linear-gradient(top, #ccc, #ccc)!important;
  background: -ms-linear-gradient(top, #ccc, #ccc)!important;
  background: -o-linear-gradient(top, #ccc, #ccc)!important;
}
input[type="file"]:disabled {
  border: 1px solid #666!important;
  border-radius: 3px!important;
  -webkit-box-shadow: 0 0px 1px #666!important;
  -moz-box-shadow: 0 0px 1px #666!important;
  box-shadow: 0 0px 1px #666!important;
  font: bold 11px Sans-Serif!important;
  padding: 3px 6px!important;
  white-space: nowrap!important;
  vertical-align: middle!important;
  color: #ccc!important;
  background: transparent!important;
}

Теперь хочу сказать еще то что, использовать совместно предыдущий стиль и этот не получится, так как используются абсолютно одинаковые теги, то есть button , input и file
Категория: Оформление кнопок | Просмотров: 897 | Добавил: Cradleshel

Теги: кнопки для ucoz, button, кнопки для сайта, CSS3, кнопки
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
«  Август 2012  »
ПнВтСрЧтПтСбВс
  12345
6789101112
13141516171819
20212223242526
2728293031
Оценка сайта
Результат
Всего ответов: 336

Полезная информация

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

Для правильного отображения сайта, вам понадобится минимальное разрешение экрана 1024 x 768px, оптимальное разрешение: 1280 x 1024px

Копирование материалов с данного сайта разрешено только с указанием обратной ссылки на источник


Copyright WebElement © 2012 - 2024
Лучшие авторские скрипты для вашего сайта и блога.

Перейти к тегам сайта
Используются технологии uCoz
Яндекс.Метрика

Статистика

Всего: 1
Гостей: 1
Юзеров: 0