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

Кнопка с уникальным эффектом анимации CSS

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

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

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

HTML

Код

<div id="steklosamig_zornes">
<div class="atugsamil_dukiman"><span>ZORNET.RU</span></div>
</div>

CSS

Код

#steklosamig_zornes{
  background: #171515;
  height: 300px;
  margin: 0;
  padding: 0;
  color: #ededf9;
  background-color: #121229;
  text-align: center;
  padding-top: 12vh;
}
.atugsamil_dukiman,
.atugsamil_dukiman::before,
.atugsamil_dukiman::after,
.atugsamil_dukiman span,
.atugsamil_dukiman span::before,
.atugsamil_dukiman span::after
{
  transition: all ease .5s;
}

.atugsamil_dukiman{
  position: relative;
  display: inline-block;
  padding: 0.3em;
  margin: 1em;
  border: solid 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.atugsamil_dukiman:hover
{
  box-shadow: 0 0 5em .5em rgba(82, 82, 210, 0.42);
}

.atugsamil_dukiman span
{
  display: inline-block;
  /* width: 100%; */
  padding: 0.6em 2em;
}

.atugsamil_dukiman:hover span
{
  background-color: #f7eeee;
  color: #151523;
}

.atugsamil_dukiman::before,
.atugsamil_dukiman::after,
.atugsamil_dukiman span::before,
.atugsamil_dukiman span::after
{
  content: '';
  position: absolute;
  border: 1px;
}

.atugsamil_dukiman::before,
.atugsamil_dukiman span::before
{
  border-style: solid none;
}

.atugsamil_dukiman::before,
.atugsamil_dukiman span::after{
  left: 0;
  top: -0.4em;
  width: 100%;
  height: calc(100% + 0.8em);
}

.atugsamil_dukiman::after,
.atugsamil_dukiman span::after
{
  border-style: none solid;
}

.atugsamil_dukiman::after,
.atugsamil_dukiman span::before
{
  top: 0;
  left: -0.4em;
  height: 100%;
  width: calc(100% + 0.8em);
}

.atugsamil_dukiman:hover::after,
.atugsamil_dukiman:hover span::after
{
  transform: scaleY(0);
}

.atugsamil_dukiman:hover::before,
.atugsamil_dukiman:hover span::before
{
  transform: scaleX(0);
}

.atugsamil_dukiman:hover span::after,
.atugsamil_dukiman:hover span::before
{
  opacity: 0;
}

Кнопки со значение по вверх, обычно встречаются в панелях приложений и панелях инструментов.

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

08 Июня 2018 Просмотров: 1151 Комментариев: (0)

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

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

Kosten

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