1

Пример заливки

Как сделать :hover-эффект, подобный тому, что на скриншоте?
Как вообще сделать такую кнопку?

0

2 ответа 2

3

Для реализации данного эффекта нам понадобится три элемента:

  1. Блок с текстом
  2. Блок для подложки с градиентным фоном из двух цветов
  3. Блок для подложки в виде треугольника на стыке двух цветов

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

введите сюда описание изображения

Сначала создаем саму кнопку:

<div class="test">Все новости</div>

И стилизуем ее:

.test {
  border-radius: 30px;
  cursor: pointer;
  color: #fff;
  font-size: 13px;
  line-height: 35px;
  text-transform: uppercase;
  display: inline-block;
  padding-left: 30px;
  padding-right: 30px;
  /* Скрываем все, что за границами основного блока */
  overflow: hidden;
  position: relative;
}

Если вставить такой код на сайт, ни текст, ни кнопку на белом фоне видно не будет, поскольку на данном этапе подложка у кнопки отсутствует.

Создадим подложку:

.test::before {
  /**
   * Двухцветная заливка от золотого к черному.
   *
   * Цвет определяется дважды, чтобы избежать эффекта градиента
   *
   * По умолчанию будет видна левая половина блока (золотая)
   * При наведении будет видна правая половина блока (черная)
   */
  background: linear-gradient(to right, #EABE5B 0%, #EABE5B 50%, #111 50%, #111 100%);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  /**
   * Подложка должна быть в два раза шире основного блока
   *
   * Это сделано для того, чтобы при наведении мы могли ее смещать,
   * имитируя эффект постепенной смены цвета
   */
  width: 200%;
  height: 100%;
  /* Отрицательный z-index нужен для того, чтобы блок был под текстом */
  z-index: -2;
  /* Здесь мы определяем скорость анимации заливки */
  transition: .3s ease-in-out;
}

.test:hover::before {
  /* Смещаем блок с подложкой влево при наведении на основной блок */
  margin-left: -100%;
}

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

.test::after {
  content: '';
  /**
   * Создаем треугольник размерами чуть больше нашего блока
   *
   * Нужно организовать небольшое наслоение треугольника
   * на правую половину подложки с двухцветным фоном,
   * чтобы избежать проблемы с синхронизацией анимации смещения
   * блока с двухцветным фоном и этого треугольника
   */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 40px 40px;
  border-color: transparent transparent #111 transparent;
  /* Конец стилей треугольника */
  position: absolute;
  /* Небольшое смещение для наложения на правую половину двухцветного фона */
  right: -5px;
  top: -5px;
  /**
   * Отрицательный z-index нужен для того, чтобы блок был под текстом
   * В то же время, он должен быть больше, чем у блока с двухцветным фоном
   */
  z-index: -1;
  /* Скорость анимации должна быть такой же, как и блока с двухцветным фоном */
  transition: .3s ease-in-out;
}

.test:hover::after {
  /* Смещаем треугольник при наведении одновременно с основной подложкой */
  right: 100%;
}

Вся кнопка в сборе:

.test {
  border-radius: 30px;
  cursor: pointer;
  color: #fff;
  font-size: 13px;
  line-height: 35px;
  text-transform: uppercase;
  display: inline-block;
  padding-left: 30px;
  padding-right: 30px;
  overflow: hidden;
  position: relative;
}
.test::before {
  background: linear-gradient(to right, #EABE5B 0%, #EABE5B 50%, #111 50%, #111 100%);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  z-index: -2;
  transition: .3s ease-in-out;
}
.test::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 40px 40px;
  border-color: transparent transparent #111 transparent;
  position: absolute;
  right: -5px;
  top: -5px;
  z-index: -1;
  transition: .3s ease-in-out;
}
.test:hover::before {
  margin-left: -100%;
}
.test:hover::after {
  right: 100%;
}
<div class="test">Все новости</div>

0

div{
  width:100px;
  height:30px;
  position:relative;
  background:#999;
  text-align:center;
  line-height:30px;
  color:#fff;
}
div:after{
  content:'';
  -webkit-transition:.4s;
}
div:after{
  content:'';
  display:block;
  width:0;
  height:0;
  position:absolute;
  left:50%; bottom:0;
  background:-webkit-linear-gradient(left,#fff,#ff0000,#fff);
  z-index:2;
  cursor:pointer;
}
div:hover:after{
  content:"нажми";
  width:100%;
  height:30px;
  top:0;
  left:0;
}
<div> типа кнопка </div>

можно повесить событие js или jq на эту кнопку

div{
  width:300px;
  height:300px;
  background:#933300;
  position:relative;
  overflow:hidden;
  margin:auto;
}
div:after{
  content:'';
  position:absolute;
  top:70%; left:70%;
  width:300px;
  height:300px;
  background:#660000;
  transform:rotate(45deg);
  transition:.4s;
}
div:hover:after{
  transform:rotate(0);
  top:0; left:0;
}
<div></div>

второй пример

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.