• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Кнопки сайта с всплывающей подсказкой на CSS (Cделать всплывающую подсказку при наведении на кнопку на CSS)
Кнопки сайта с всплывающей подсказкой на CSS
Kosten
Дата: Воскресенье, 2018-10-21, 21:53 | Сообщение 1
Администраторы
Сообщений:18498
Награды: 55


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

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

1.



2.



HTML

Код
<section>
  <div class="center">
    <h4>ZorNet - портал для вебмастера</h4>
    <a class="kadognloads" href="#0">
      <span>
        <em>Ключевые слова</em>
        <i class="fa fa-download"></i>
      </span>
    </a>
    <br>
    <br>
    </section>


CSS

Код
section {
  width: 100%;
  height: 100vh;
  display: table;
}

section .center {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.kadognloads {
  position: relative;
  background: #E75A7C;
  display: inline-block;
  height: 60px;
  width: 200px;
  border-radius: 50em;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

span,
em,
i {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
}

span {
  overflow: hidden;
}

.kadognloads em {
  top: 0;
  line-height: 60px;
}

.kadognloads i {
  top: 100%;
  line-height: 60px;
}

.kadognloads:hover em,
.kadognloads.hover em{
  top: -100%;
}

.kadognloads:hover i,
.kadognloads.hover i{
  top: 0%;
}

em,
i {
  transition: top 0.3s;
}

.kadognloads::before,
.kadognloads::after {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.kadognloads::before {
  content: 'File Size: 5mb';
  width: 160px;
  height: 60px;
  background: #0E84A1;
  border-radius: 0.25em;
  bottom: 90px;
  line-height: 60px;
  left: calc(50% - 80px);
  font-size: 15px;
}

.kadognloads::after {
  content: '';
  width: 0px;
  height: 0px;
  border: 10px solid transparent;
  border-top-color: #0E84A1;
  bottom: 70px;
  left: calc(50% - 10px);
}

.kadognloads:hover::before,
.kadognloads:hover::after,
.kadognloads.hover::before,
.kadognloads.hover::after{
  opacity: 1;
  visibility: visible;
}

.kadognloads:hover::before,
.kadognloads.hover::before{
  bottom: 80px;
}

.kadognloads:hover::after,
.kadognloads.hover::after{
  bottom: 60px;
}


Также изначально можно посмотреть на demo страницы.

Демонстрация
Прикрепления: 2796915.png(14.0 Kb) · 8950862.png(13.5 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Кнопки сайта с всплывающей подсказкой на CSS (Cделать всплывающую подсказку при наведении на кнопку на CSS)
  • Страница 1 из 1
  • 1
Поиск: