ZorNet.Ru — сайт для вебмастера » HTML и CSS » Создать кнопку для скрытия элемента на CSS

Создать кнопку для скрытия элемента на CSS

В этой статье как можно подробно разберем одно простое решение закрытие элемента, где будет кнопка для этого как на модальном окне. А точнее, просто добавляем элемент в виде кнопки на интернет ресурсе, как "Закрыть" где основном по дизайн идет виде крестика. Но думаю многие не уделяли внимание, а как все же закрывается тот или иной элемент при клике, что как раз в этой статье будет представлен код и стиле под него. Такая функция дает пользователю возможность убрать или скрыть с той или иной страницы не нужный элемент.

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

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

Проверялся на работоспособность, где сменил кнопку по ссылку, здесь на картинке и на Demo странице в оригинале.

Скрыть и показать div кнопку с помощью CSS

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

HTML

Код

<input type="checkbox" id="sucagalicere">
  <div class='sedasearcengin'>
  <p>
Здесь картинка или написано
  </p>
  <label for="sucagalicere" class="mercialeb"></label>
</div>

CSS

Код

.sedasearcengin {
  display: inline-block;
  position: relative;
  width: 28%;
  height: 285px;
  margin: 1%;
}

.mercialeb {
  display: block;
  position: absolute;
  top: 8px;
  right: -5px;
  width: 17px;
  height: 17px;
  background-image: url(http://zornet.ru/ABVUN/sarunolas/Mo2i0FyuS1_LnQleocRoNA.png);
  cursor: pointer;
}

.sedasearcengin p {
  width: 100%;
  height: auto;
}

#sucagalicere {
  display: none;
}
#sucagalicere:checked + .sedasearcengin {
  visibility: hidden;
}

Если вы решите использовать несколько элементов, то для каждого добавленного тега input указывается свой оригинальный идентификатор, и безусловно нужно добавлять под него стили CSS.

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

24 Августа 2018 Просмотров: 1373 Комментариев: (0)

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

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

Kosten

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