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

Подборка переключатели страниц uCoz

Думаю многому большинству не нравятся просто цифровые переключатели. Но во первых они не очень всегда вписываются в ваш дизайн сайта и всегда как то смотрятся особо отдалено. И когда заказывают макет, но не прерывно с ним идут переключатели страниц под сайт. Но и в этом случай некоторым не нравятся они и начинается поиск которые бы отлично подошли на ваш сайт.

Вот хочу предложить подборку которую создал Fahrieva, сразу оговорюсь, коды все качественные и в архиве есть файл на Demo где вы сможете воочию посмотреть их в работе. Лично мне понравились как по своему дизайну и их работоспособности. При нажатие они меняются в оттенке цвета, что очень красиво смотрится.
И так начнем:

Оранжевый:
Прописываем стиль в CSSсайта.

Код

.swchItemA{
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding:10px;
  background:#e6c230;
  border-bottom: 3px solid #ccaa23;
  color:#fff;
}
.swchItem{
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding:10px;
  background: #363d43;
  border-bottom: 3px solid #171c1f;
  color:#fff;
  margin-left:10px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
}
.swchItem:hover{
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding:10px;
  background:#e6c230;
  border-bottom: 3px solid #ccaa23;
  color:#fff;
}

Фиолетовый:
В CSS

Код

.swchItemA{
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding:10px;
  background:#9623cc;
  border-bottom: 3px solid #7e18ae;
  color:#fff;
}
.swchItem{
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding:10px;
  background: #363d43;
  border-bottom: 3px solid #171c1f;
  color:#fff;
  margin-left:10px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
}
.swchItem:hover{
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding:10px;
  background:#9623cc;
  border-bottom: 3px solid #7e18ae;
  color:#fff;
}

Зеленый:
В CSS

Код

.swchItemA{
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding:10px;
  background:#24c44a;
  border-bottom: 3px solid #1ab03d;
  color:#fff;
}
.swchItem{
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding:10px;
  background: #363d43;
  border-bottom: 3px solid #171c1f;
  color:#fff;
  margin-left:10px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
}
.swchItem:hover{
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding:10px;
  background:#24c44a;
  border-bottom: 3px solid #1ab03d;
  color:#fff;
}

Красный:
В CSS

Код

.swchItemA{
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding:10px;
  background:#bf2323;
  border-bottom: 3px solid #a81616;
  color:#fff;
}
.swchItem{
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding:10px;
  background: #363d43;
  border-bottom: 3px solid #171c1f;
  color:#fff;
  margin-left:10px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
}
.swchItem:hover{
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding:10px;
  background:#bf2323;
  border-bottom: 3px solid #a81616;
  color:#fff;
}

Синий:
В CSS

Код

.swchItemA{
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding:10px;
  background:#1c71b3;
  border-bottom: 3px solid #12609c;
  color:#fff;
}
.swchItem{
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding:10px;
  background: #363d43;
  border-bottom: 3px solid #171c1f;
  color:#fff;
  margin-left:10px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
}
.swchItem:hover{
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding:10px;
  background:#1c71b3;
  border-bottom: 3px solid #12609c;
  color:#fff;
}

Источник: www.center-dm.ru

22 Августа 2013 Загрузок: 2 Просмотров: 1813 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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