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

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

Кнопка скачать, где при наведении на нее появляется всплывающее подсказка, которая несет информацию, а какая она будет зависеть от тематики. Сама кнопки создано на HTML и CSS, где стилистика по умолчанию идет в одном оттенке цвета. Что веб-разработчик поставит тот оттенок, который ему требуется стать не сложно.

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

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

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

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

HTML

Код

<a href="" data-tooltip="Скачать PDF, 342KB">
 
 Скачать
 
 
</a>

CSS

Код

a {
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  color: #f3eeee;
  position: relative;
  background: #4d5cb7;
  display: table;
  width: 198px;
  height: 48px;
  border-radius: 50px;
  border: 2px solid rgba(0, 0, 0, 0);
  margin: 175px auto 0;
}
a:hover {
  background: #f9f4f4;
  border: 2px solid #5761a2;
}
span {
  overflow: hidden;
}
span, em, i.fa {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 46px;
}
em {
  top: 0;
  font-style: normal;
}
i.fa {
  top: 100%;
  font-size: 30px;
  color: #3C4896;
}
a:hover em {
  top: -100%;
}
a:hover i.fa {
  top: 0;
}
a:before, a:after{
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
a:before{
  content: attr(data-tooltip);
  padding: 10px;
  display: block;
  white-space: nowrap;
  background: #3C4896;
  border-radius: 5px;
  bottom: 90px;
  transform: translateX(-50%);
  margin-left: 50%;
}
a:after {
  content: "";
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #3C4896;
  bottom: 70px;
  left: calc(50% - 10px);
}
a:hover:before, a:hover:after {
  opacity: 1;
  visibility: visible;
  transition: .2s ease-in-out .4s;
}
a:hover:before {
  bottom: 70px;
}
a:hover:after {
  bottom: 50px;
}

PS - здесь полностью формат зависит от CSS, и чтоб поменять и как пример сделать кнопку с углами, то просто в стилях находим свойство, которое отвечает за закругление, и выставляем свое значение.

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

30 Апреля 2019 Загрузок: 1 Просмотров: 1333 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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