ZorNet.Ru — сайт для вебмастера » HTML и CSS » Кнопка с выпадающей подсказкой на CSS

Кнопка с выпадающей подсказкой на CSS

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

И здесь она появляется с правой стороны, и выезжает на левую, что смотрится красиво. Что по стилистики самой кнопки, то здесь вы можете сами добавить стилей и создать свою оригинальную подборку. Так как она вообще по умолчанию светлая идет, но пришлось выставить градиенты, чтоб какой-то стиль был.

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

Так будет кнопка смотреться при входе на сайт или страницу.

Создание простых всплывающих подсказок на HTML и CSS

Создание простых всплывающих подсказок на HTML и CSS

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

Как добавить всплывающую подсказку на кнопку

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

HTML

Код

<div class="notuscordi-setaking">
ZORNET.RU
<span class="nasolebutab">ZorNet.Ru - портал вебмастера<span class="keguntales"></span>
</span>
</div>

CSS

Код

.notuscordi-setaking {
  background: linear-gradient(to bottom, #9e9a9a 0%, #151414 100%) repeat scroll 0 0 rgba(245, 243, 243, 0.77);
  box-shadow: 0 0px 1px rgba(21, 20, 20, 0.54);
  color: #f9f4f4;
  cursor: pointer;
  display: table;
  font: 500 15px verdana;
  margin: 27px auto;
  padding: 18px 21px;
  position: relative;
  text-decoration: none;
  text-align: center;
  transition: all 0.5s ease-in 0s;
  z-index: 1;
  border-radius: 3px;
  box-shadow: 3px 10px 17px rgba(37, 37, 37, 0.23), 3px 9px 30px -15px rgba(185, 180, 180, 0.69);
}
.notuscordi-setaking:hover, .notuscordi-setaking:active {
color: #fdf6cf;
}

.notuscordi-setaking span {
  box-sizing: border-box;
  opacity: 0;
  padding: 11px;
  position: absolute;
  transition: all 0.5s ease-in 0.2s;
  width: 179px;
  z-index: 1;
}
.notuscordi-setaking span .keguntales {
  background: none repeat scroll 0 0 rgba(251, 247, 247, 0.8);
  border-color: transparent;
  border-radius: 0;
  border-style: solid;
  box-sizing: border-box;
  display: block;
  height: 9px;
  left: 39%;
  padding: 4px;
  position: absolute;
  transform: rotate(45deg);
  transition: all 0.4s ease-in 0.3s;
  width: 15px;
  z-index: 0;
}

.notuscordi-setaking span.nasolebutab {
  left: 4px;
  top: 0;
}
.notuscordi-setaking span.nasolebutab .keguntales {
  left: 172px;
  top: 20px;
}

.notuscordi-setaking:hover span {
  background: none repeat scroll 0 0 #529cc1;
  color: #f9f5f5;
  font-size: 15px;
  height: auto;
  opacity: 100;
  transition: all 0.5s ease-in 0.2s;
}
.notuscordi-setaking:hover span .keguntales {
  transition: all 0.4s ease-in 0.2s;
}
.notuscordi-setaking:hover span.nasolebutab {
  left: -193px;
}

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

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

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

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

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

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

Kosten

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