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

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

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

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

Так где хотите видеть:

HTML

Код

<div class="bartumin">
  <p class="rimogsa_tumerg">ZORNET</p>
  <div class="tersamil_desma">
  <p class="rnimag_zornet">RU</p>
  </div>
  </div>

CSS

Код

.bartumin {
  background: #3c4144;
  margin : 15px auto;
  width : 193px;
  height : 47px;
  overflow: hidden;
  text-align : center;
  transition : .2s;
  cursor : pointer;
  box-shadow: 0px 1px 2px rgba(14, 14, 14, 0.28);
  border-radius: 3px;
}
.tersamil_desma {
  position : relative;
  width : 187px;
  height : 99px;
  margin-top: -97px;
  padding-top: 2px;
  background : #307db5;
  left : -249px;
  transition : .3s;
}
.rimogsa_tumerg {
  color: #fbf9f9;
  transition : .3s;
}
.rnimag_zornet {
  margin-top : 63px;
  margin-right : -130px;
  color : #fdf7f7;
}
.bartumin:hover .tersamil_desma{
  left: -130px;
}
.bartumin:hover .rimogsa_tumerg{
.rimogsa_tumerg
  margin-left : 65px;
}
.bartumin:active {
  box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
}

Вся стилистика редактируется в CSS, это как палитра и диаметр по вертикале или в горизонтальном положение.

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

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

HTML

Код

<a href="http://zornet.ru/" class="zornet_ru_merlokeg">
<span>➡</span>ZORNET.RU
</a>

CSS

Код

.zornet_ru_merlokeg {
  background: #101988;
  border: none;
  color: #fbf7f7;
  display: inline-block;
  font-size: 19px;
  overflow: hidden;
  padding: 19px 27px;
  position: relative;
  text-decoration: none;
  border-radius: 3px;
  transition: background .4s cubic-bezier(0.42, 0, 0.46, 0.96), padding .4s cubic-bezier(0.42, 0, 0.52, 0.99);
}

.zornet_ru_merlokeg span {
  display: block;
  font-size: 50px;
  height: 0;
  line-height: 0;
  position: absolute;
  top: 49%;
  right: 100%;
  transition: all .4s ease-in-out;
}
.zornet_ru_merlokeg:hover {
  background: #351103;
  padding: 19px 19px 19px 40px;
}
.zornet_ru_merlokeg:hover span {
  right: 85%;
}

Смотрим демонстрацию:

25 Декабря 2017 Просмотров: 1991 Комментариев: (2)

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

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

Kosten

Комментарии: 2
Порядок вывода комментариев: Kosten 26 Декабря 2017 01:21¹ +1 Можно сделать под софт, чтоб при наведение появлялась, сколько весит архив для скачивание. volkodav2312 28 Декабря 2017 23:52² 0 Да, да, отличная идея