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

Замечательный эффект для кнопок на CSS

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

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

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

1. Рассмотрим сам эффект, где изначально все идет по стандарту.

2. Это клик появляется на основе и начало появление трюка.

3. Все в завершение, где видим, что полностью цветовая схема изменилась, как на дизайн, так и на знаках.

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

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

HTML

Код

<div class="manugactunos ">
  <div class="sakocusing sukeredogerom">
  <p>facebook</p>
  <span class="ginkas-duagock1"></span>
  <span class="ginkas-duagock2"></span>
  </div>

  <div class="sakocusing sukemucvaorsed">
  <p>twitter</p>
  <span class="ginkas-duagock1"></span>
  <span class="ginkas-duagock2"></span>
  </div>

  <div class="sakocusing containdopas">
  <p>google+</p>
  <span class="ginkas-duagock1"></span>
  <span class="ginkas-duagock2"></span>
  </div>

  <div class="sakocusing gadvertisin">
  <p>linkedin</p>
  <span class="ginkas-duagock1"></span>
  <span class="ginkas-duagock2"></span>
  </div>

  <div class="sakocusing gudenab">
  <p>youtube</p>
  <span class="ginkas-duagock1"></span>
  <span class="ginkas-duagock2"></span>
  </div>
</div>

CSS

Код

.manugactunos {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.sakocusing{
  width: 250px;
  border: 3px solid #000;
  box-sizing: border-box;
  padding: 10px 15px;
  margin-bottom: 20px;
  color: #313233;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s ease;
}

.sakocusing > p{
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 20px;
  position: relative;
  z-index: 1;
}

.sakocusing:hover > p{
  color: #f7f8fb;
}

.sukeredogerom{
  border: 3px solid #34518e;
  color: #324d86;
}

.sukemucvaorsed{
  border: 3px solid#089ed6;
  color: #0da2da;
}

.containdopas{
  border: 3px solid #ca4737;
  color: #ca4231;
}

.gadvertisin{
  border: 3px solid #046898;
  color: #086e9e;
}

.gudenab{
  border: 3px solid #a70707;
  color: #af0707;
}

.sakocusing .ginkas-duagock1:before,
.sakocusing .ginkas-duagock1:after,
.sakocusing .ginkas-duagock2:before,
.sakocusing .ginkas-duagock2:after
{
  content: "";
  position: absolute;
  transition: all 0.6s ease;
}

/* facebook */
.sukeredogerom .ginkas-duagock1:before{
  top: -55px;
  left: 0;
  border-top: 37px solid #375084;
  border-bottom: 37px solid transparent;
  border-right: 130px solid transparent;
  border-left: 130px solid transparent;
}

.sukeredogerom .ginkas-duagock1:after{
  left: 0;
  bottom: -55px;
  border-top: 37px solid transparent;
  border-bottom: 37px solid #375084;
  border-right: 130px solid transparent;
  border-left: 130px solid transparent;
}

.sukeredogerom .ginkas-duagock2:before{
  top: -3px;
  left: 160px;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 130px solid #375084;
  border-left: 130px solid transparent;
}

.sukeredogerom .ginkas-duagock2:after{
  top: -3px;
  left: -160px;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 130px solid transparent;
  border-left: 130px solid #375084;
}

/* twitter */
.sukemucvaorsed .ginkas-duagock1:before{
  top: -55px;
  left: 0;
  border-top: 37px solid #1091c1;
  border-bottom: 37px solid transparent;
  border-right: 130px solid transparent;
  border-left: 130px solid transparent;
}

.sukemucvaorsed .ginkas-duagock1:after{
  left: 0;
  bottom: -55px;
  border-top: 37px solid transparent;
  border-bottom: 37px solid #1091c1;
  border-right: 130px solid transparent;
  border-left: 130px solid transparent;
}

.sukemucvaorsed .ginkas-duagock2:before{
  top: -3px;
  left: 160px;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 130px solid #1091c1;
  border-left: 130px solid transparent;
}

.sukemucvaorsed .ginkas-duagock2:after{
  top: -3px;
  left: -160px;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 130px solid transparent;
  border-left: 130px solid #1091c1;
}

/* google */
.containdopas .ginkas-duagock1:before{
  top: -55px;
  left: 0;
  border-top: 37px solid #b93d2e;
  border-bottom: 37px solid transparent;
  border-right: 130px solid transparent;
  border-left: 130px solid transparent;
}

.containdopas .ginkas-duagock1:after{
  left: 0;
  bottom: -55px;
  border-top: 37px solid transparent;
  border-bottom: 37px solid #b93d2e;
  border-right: 130px solid transparent;
  border-left: 130px solid transparent;
}

.containdopas .ginkas-duagock2:before{
  top: -3px;
  left: 160px;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 130px solid #b93d2e;
  border-left: 130px solid transparent;
}

.containdopas .ginkas-duagock2:after{
  top: -3px;
  left: -160px;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 130px solid transparent;
  border-left: 130px solid #b93d2e;
}

/* linkedin */
.gadvertisin .ginkas-duagock1:before{
  top: -55px;
  left: 0;
  border-top: 37px solid #0f6a96;
  border-bottom: 37px solid transparent;
  border-right: 130px solid transparent;
  border-left: 130px solid transparent;
}

.gadvertisin .ginkas-duagock1:after{
  left: 0;
  bottom: -55px;
  border-top: 37px solid transparent;
  border-bottom: 37px solid #0f6a96;
  border-right: 130px solid transparent;
  border-left: 130px solid transparent;
}

.gadvertisin .ginkas-duagock2:before{
  top: -3px;
  left: 160px;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 130px solid #0f6a96;
  border-left: 130px solid transparent;
}

.gadvertisin .ginkas-duagock2:after{
  top: -3px;
  left: -160px;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 130px solid transparent;
  border-left: 130px solid #0f6a96;
}

/* youtube */
.gudenab .ginkas-duagock1:before{
  top: -55px;
  left: 0;
  border-top: 37px solid #9c0808;
  border-bottom: 37px solid transparent;
  border-right: 130px solid transparent;
  border-left: 130px solid transparent;
}

.gudenab .ginkas-duagock1:after{
  left: 0;
  bottom: -55px;
  border-top: 37px solid transparent;
  border-bottom: 37px solid #9c0808;
  border-right: 130px solid transparent;
  border-left: 130px solid transparent;
}

.gudenab .ginkas-duagock2:before{
  top: -3px;
  left: 157px;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-right: 130px solid #9e0c0c;
  border-left: 130px solid transparent;
}

.gudenab .ginkas-duagock2:after{
  top: -3px;
  left: -157px;
  border-top: 27px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 130px solid transparent;
  border-left: 130px solid #940c0c;
}

/* hover effects */
.sakocusing:hover .ginkas-duagock1:before{
  top: 0;
}

.sakocusing:hover .ginkas-duagock1:after{
  bottom: 0;
}

.sakocusing:hover .ginkas-duagock2:before,
.sakocusing:hover .ginkas-duagock2:after{
  left: 0;
}

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

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

28 Ноября 2018 Просмотров: 1176 Комментариев: (0)

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

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

Kosten

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