ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект скольжение в контейнере на CSS

Эффект скольжение в контейнере на CSS

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

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

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

Пример работы скольжение в кнопке:

Кнопка с эффектом при наведение клика

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

HTML

Код

<a class="dekastain-kuelemen" href="">
  <div class="kides-laxateb"><i class="fa fa-home"></i></div>
  <div class="gusezam-dopenum">Главная</div>
</a>
<a class="dekastain-kuelemen" href="">
  <div class="kides-laxateb"><i class="fa fa-wrench"></i></div>
  <div class="gusezam-dopenum">Ремонт</div>
</a>
<a class="dekastain-kuelemen" href="">
  <div class="kides-laxateb"><i class="fa fa-headphones"></i></div>
  <div class="gusezam-dopenum">Связь</div>
</a>

CSS

Код

.kides-laxateb i {
  font-size: 38px;
}

.dekastain-kuelemen {
  position: relative;
  display: inline-flex;
  height: 100px;
  width: 100px;
  margin: 0 7px;
  color: #f5eeee;
  border-radius: 100%;
  border-color: #f5f0f0;
  border-style: solid;
  border-width: 3px;
  overflow: hidden;
}
.kides-laxateb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.2s ease;
}
.gusezam-dopenum {
  position: absolute;
  top: 150%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.2s ease;
}
.dekastain-kuelemen:hover .kides-laxateb {
  top: -50%;
}
.dekastain-kuelemen:hover .gusezam-dopenum {
  top: 50%;
}

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

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

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

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

СКАЧАТЬ

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

Kosten

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