ZorNet.Ru — сайт для вебмастера » Меню для сайта » Темное категории кнопок меню HTML + CSS

Темное категории кнопок меню HTML + CSS

Отличное решение на сайты, где изначально идет подборка категорий, в большинстве это кино порталы, где для них созданы кнопки категорий на CSS. Изначально были простые кнопки, где не было не чего настроено, что большие название просто знаками не корректно смотрелось.

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

Так теперь выглядят, но на demo странице идут в простом дизайне.

Приступаем к установке:

HTML

Код

<div class="modegco-nsidered-denakas">
  <a href="#">Аниме</a>
  <a href="#">Боевики</a>
  <a href="#">Биография</a>
  <a href="#">Военные</a>
  <a href="#">Вестерны</a>
  <a class="somethig-ngeption" href="#">Документальные</a>
  <a href="#">Детективы</a>
  <a href="#">Драмы</a>
  <a href="#">Исторические</a>
  <a href="#">Индийские</a>
  <a href="#">Комедии</a>
  <a href="#">Криминал</a>
  <a href="#">Мистика</a>
  <a href="#">Мелодрамы</a>
  <a href="#">Мультфильмы</a>
  <a href="#">Мюзиклы</a>
  <a href="#">Отечественные</a>
  <a href="#">Приключения</a>
  <a href="#">Спорт</a>
  <a href="#">Семейные</a>
  <a href="#">Триллеры</a>
  <a href="#">Ужасы</a>
  <a href="#">Фантастика</a>
  <a href="#">Фэнтези</a>
  <a href="#"> Новогодние</a>
  <a href="#">Музыка</a>
  <a href="#">TВ-Шоу</a>
  <div style="clear: both;"></div>
  </div>

CSS

Код

.modegco-nsidered-denakas {
  padding: 0 0 0 0;
  background: transparent;
}

.modegco-nsidered-denakas a {
  float: left;
  display: block;
  width: 100px;
  height: 20px;
  margin-left: 5px;
  margin-top: 5px;
  background-color: #291d3e;
  color: #dcdbdb;
  text-align: center;
  text-transform: uppercase;
  padding-top: 5px;
  text-decoration: none;
  font-size: 11px;
  box-shadow: 0px 4px 3px rgba(62, 57, 57, 0.31), 2px 9px 14px 2px rgba(53, 49, 49, 0.26);
  padding: 7px 10px 0px 10px;
  border: 2px solid #d0c2c2;
  text-shadow: 0 1px 0 #1d1b1b;
}

  .somethig-ngeption {
  letter-spacing: -0.7px;
}

  .modegco-nsidered-denakas a:hover {
  background-color: #b75c2a;
  border:1px solid #cc5b1e;
  color: #fbf9f7;
  border: 2px solid #d8d0d0;
}

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

Демонстрация

03 Августа 2019 Загрузок: 1 Просмотров: 1122 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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