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

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

Прекрасно выполненная кнопка, где при наведении на ее появляется подсказка с ключевыми словами, и это все в двух вариантах на чистом стиле CSS. Идет 2 варианта, это подсказка появляется вверху, а второй будет появление внизу. Так, что для себя можно выбрать самый актуальный вариант. Безусловно есть очень много различный версий, где большинство плагинов JQuery, что применяться для создания всплывающих подсказок. Но как можно заметить, что самое простое решение является лучшим из всех представленных.

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

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

Проверяя эффект появление, то так все смотрится, это первой подсказкой.

Здесь уже видим, что клик наведен, но только все появляется ниже самой кнопки.

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

HTML

Код

<div class="doingecomev">
  <div class="sabsta-kesove">
  Наведи на меня
  <span class="businesesab top_businesesab">Здесь подсказка</span>
  </div>
  <div class="sabsta-kesove">
  Наведи клик
  <span class="businesesab bottom_businesesab">Ключевое слово</span>
  </div>
</div>

CSS

Код

.doingecomev{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 438px;
}

.sabsta-kesove {
  float: left;
  margin-right: 30px;
  text-transform: uppercase;
  background: #4175b7;
  color: #e6e9ef;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
  position: relative;
  font-weight: 700;
  border: 2px solid #c3bdbd;
}

.sabsta-kesove:last-child{
  margin-right: 0;
}

/* businesesab */
.businesesab{
  position: absolute;
  width: 100%;
  height: 44px;
  line-height: 44px;
  border: 3px solid #17d0f7;
  color: #17d0f7;
  top: 0;
  left: 0;
  font-weight: 700;
  font-size: 11px;
  border-radius: 10px;
  transition: all 0.5s ease;
  letter-spacing: 1px;
  opacity: 0;
}

.businesesab.top_businesesab{
  top: -80px;
}

.businesesab.bottom_businesesab{
  top: 80px;
}

.businesesab.top_businesesab:before{
  content: "";
  position: absolute;
  bottom: -30px;
  left: 85px;
  border-left: 15px solid rgba(0, 0, 0, 0);
  border-right: 15px solid rgba(0, 0, 0, 0);
  border-top: 15px solid #17d0f7;
  border-bottom: 15px solid rgba(0, 0, 0, 0);
}

.businesesab.top_businesesab:after{
  content: "";
  position: absolute;
  bottom: -20px;
  left: 90px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #30333A;
  border-bottom: 10px solid transparent;
}

.businesesab.bottom_businesesab:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 85px;
  border-left: 15px solid rgba(0, 0, 0, 0);
  border-right: 15px solid rgba(0, 0, 0, 0);
  border-top: 15px solid rgba(0, 0, 0, 0);
  border-bottom: 15px solid #17d0f7;
}

.businesesab.bottom_businesesab:after{
  content: "";
  position: absolute;
  top: -20px;
  left: 90px;
  border-left: 10px solid rgba(0, 0, 0, 0);
  border-right: 10px solid rgba(0, 0, 0, 0);
  border-top: 10px solid rgba(0, 0, 0, 0);
  border-bottom: 10px solid #303338;
}

.sabsta-kesove:hover .businesesab{
  opacity: 1;
}

@media screen and (max-width: 650px){
  .doingecomev{
  width: 140px;
  }
  .sabsta-kesove{
  margin: 40px 0;
  }
}

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

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

02 Января 2019 Загрузок: 1 Просмотров: 1350 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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