Эффект перелива на кнопке (фигуре)

[cemah]

Доброго времени суток. Подскажите, можно ли как-то к кнопке (в моём случае, это объект "Фигура") прикрутить эффект перелива при наведении? Вот здесь, то, что мне нужно https://codepen.io/davidicus/pen/emgQKJ 4 кнопка слева. Спасибо.

[Vitamin701]

Так там же код CSS есть

Код: Выделить всё

.btn-4 {
  border: 1px solid;
  overflow: hidden;
  position: relative;
 
  span {
    z-index: 20;
  }
 
  &:after {
    background: #fff;
    content: "";
    height: 155px;
    left: -75px;
    opacity: .2;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 50px;
    z-index: -10;
  }
}

.btn-4:hover {
 
  &:after {
    left: 120%;
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  }
}

[sinpai]

Посмотрите кнопку от Гудвина. Там так же есть подобный эффект. http://shop.wysiwygwebbuilder.ru/index. ... duct_id=98

[MasterOfPuppets]

1. Слой -> HTML-код -> в теге
пишите:
class="btn-4"
2. На страницу вставляете HTML объект, в нем выбираете CSS in media query/ Внутри вставляете:

.btn-4 {
border: 1px solid;
overflow: hidden;
position: relative;
}
.btn-4 span {
z-index: 20;
}
.btn-4:after {
background: #fff;
content: "";
height: 155px;
left: -75px;
opacity: .2;
position: absolute;
top: -50px;
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
-webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
width: 50px;
z-index: -10;
}

.btn-4:hover:after {
left: 120%;
-webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

[Eric]

Обратитесь к Spoon, у него неплохая коллекция кнопок была http://shop.wysiwygwebbuilder.ru/index. ... uct_id=102

[semyonl]

MasterOfPuppets, могли бы скинуть проектом? Не получается реализовать по вашей инструкции.

[MasterOfPuppets]

semyonl, Держите. Только у меня wb 15 последняя версия.
Вот на этом сайте еще реализовал такую кнопку по Вашей наводке :) http://www.kubaneq3.beget.tech/

[semyonl]

MasterOfPuppets, спасибо! Отличный сайт, кстати.

Эффект применим только к слою? Можно ли перенести эффект на фигуру или объекты которые можно размести в LayoutGrid?

[MasterOfPuppets]

Скорее всего можно, но у меня не получилось. Какие-то там нюансы видимо.