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

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

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

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

Так изначально идет, но палитру сами ставите:

Здесь пользователь навел клик:

HTML

Код

<div class="salohsarunimg">
<a href="http://zornet.ru/" class="tkinsa_gterda zornet_ru_lodsa">ZORNET.RU</a>
</div>

CSS

Код

.salohsarunimg {
  text-align: center;
}
a {
  text-align: center;
  margin: 0 auto;
  float: none;
  margin-top: 49px;
}
.tkinsa_gterda {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 12px 36px;
  color: #f5f1f1;
  font-family: "Open Sans", Geneva, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.tkinsa_gterda::after {
  position: absolute;
  content: '';
  z-index: -1;
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tkinsa_gterda:hover::after,
.tkinsa_gterda:active::after {
  width: 100%;
}
.zornet_ru_lodsa {
  background: #131212;
  color: #fbf5f5;
}
.zornet_ru_lodsa::after {
  background: #254aa0;
}
.zornet_ru_lodsa:visited {
  color: #fdf5f5;
}
.zornet_ru_lodsa:hover {
  color: #fbf7f7;
}

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

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

29 Декабря 2017 Просмотров: 1680 Комментариев: (0)

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

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

Kosten

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