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

WYSIWYG Web Builder, вопросы которые не охвачены в других разделах.
Правила форума
1. Название темы должно кратко описывать суть вашего вопроса, темы типа: "Помогите", "Почему", "Что это", "Что-то глючит" - будут удаляться.
2. Задавая свой вопрос, постарайтесь предоставить максимум информации о проблеме, если есть возможность, приложите шаблон проекта *.wtp.
Подробнее: Правила создания новых тем и ответов на существующие темы.
Данный форум - это место обсуждения вопроса, а не техподдержка в классическом смысле. Все участники форума Web Builder по-русски с удовольствием вам помогут, если это будет в их силах.
Ответить Вложения 2
Аватара пользователя

Автор Темы
cemah
Втянувшийся
Втянувшийся
Сообщения: 58
Зарегистрирован: 01 окт 2014, 00:33
Версия Web Builder: 14

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

Сообщение cemah » 03 мар 2020, 04:51

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

Реклама
Аватара пользователя

Vitamin701
Знаток
Знаток
Сообщения: 446
Зарегистрирован: 20 ноя 2017, 19:30
Версия Web Builder: 12.5

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

Сообщение Vitamin701 » 03 мар 2020, 06:10

Так там же код 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
Опытный
Опытный
Сообщения: 795
Зарегистрирован: 01 сен 2014, 11:19
Версия Web Builder: 14.2.2
Имя: Иван
Контактная информация:

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

Сообщение sinpai » 03 мар 2020, 12:44

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

Аватара пользователя

MasterOfPuppets
Продвинутый
Продвинутый
Сообщения: 266
Зарегистрирован: 10 май 2015, 19:37
Версия Web Builder: 14.2.2
Имя: Александр
Контактная информация:

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

Сообщение MasterOfPuppets » 09 мар 2020, 13:48

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

Чтобы стать крабом, нужно стать раком и ходить боком

Аватара пользователя

Eric
Сведущий
Сведущий
Сообщения: 167
Зарегистрирован: 19 дек 2018, 17:40
Версия Web Builder: 14.2.2
Имя: Eric Cartman

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

Сообщение Eric » 09 мар 2020, 22:42

Обратитесь к Spoon, у него неплохая коллекция кнопок была http://shop.wysiwygwebbuilder.ru/index. ... uct_id=102
Относись ко всему проще. Проще, ещё проще, и ещё чуточку... Ммм, чувствуешь его? Этот сладкий запах пофигизма :)

Аватара пользователя

semyonl
Интересующийся
Интересующийся
Сообщения: 48
Зарегистрирован: 05 авг 2016, 07:27
Версия Web Builder: 11.2

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

Сообщение semyonl » 16 мар 2020, 11:16

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

Аватара пользователя

MasterOfPuppets
Продвинутый
Продвинутый
Сообщения: 266
Зарегистрирован: 10 май 2015, 19:37
Версия Web Builder: 14.2.2
Имя: Александр
Контактная информация:

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

Сообщение MasterOfPuppets » 16 мар 2020, 13:13

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

Аватара пользователя

semyonl
Интересующийся
Интересующийся
Сообщения: 48
Зарегистрирован: 05 авг 2016, 07:27
Версия Web Builder: 11.2

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

Сообщение semyonl » 16 мар 2020, 18:31

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

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

Аватара пользователя

MasterOfPuppets
Продвинутый
Продвинутый
Сообщения: 266
Зарегистрирован: 10 май 2015, 19:37
Версия Web Builder: 14.2.2
Имя: Александр
Контактная информация:

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

Сообщение MasterOfPuppets » 16 мар 2020, 23:12

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


Ответить Вложения 2

Вернуться в «Общие вопросы.»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость