Поворот контура клипа с нижней правой стороны на нижнюю левую сторону

#css #clip-path

Вопрос:

У меня есть кнопка на css:

 button {
  background: #FB5D5D;
  width: 350px;
  height: 54px;
  border-radius: 4px;
  position: relative;
  z-index: 10;
  overflow: hidden;
  color: white;
  border: none;
  transition: clip-path 3s ease, transform 3s ease, -webkit-clip-path 3s ease;
}

button:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(-90deg, #D92121 0%, #FF6464 100%);
  z-index: -1;
  transition: clip-path .3s ease;
  clip-path: polygon(200% 0, 0 200%, 0 0);
}

button:hover:after {
  clip-path: polygon(0 0, 0 0, 0 0);
}

 <button type="submit" class="w-full font-bold">Send</button>

Как я могу запустить анимацию с левой нижней стороны, но не справа? Мне нужно, чтобы при наведении курсора пользователя на кнопку анимация начиналась слева и переходила от светлого цвета к темному (светлый цвет должен быть на всей кнопке, как сейчас). Помогите, пожалуйста. Спасибо.

Ответ №1:

Вы можете сделать это, просто используя его transfomr: rotateY(0.5turn); для поворота 90deg и создания анимации right .

Редактировать

измените угол наклона фона-градиента -270deg , чтобы переместить темную сторону вправо.

 button {
  background: #FB5D5D;
  width: 350px;
  height: 54px;
  border-radius: 4px;
  position: relative;
  z-index: 10;
  overflow: hidden;
  color: white;
  border: none;
  transition: clip-path 3s ease, transform 3s ease, -webkit-clip-path 3s ease;
}

button:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(-270deg, #D92121 0%, #FF6464 100%);
  z-index: -1;
  transition: clip-path .3s ease;
  clip-path: polygon(200% 0, 0 200%, 0 0);
  transform: rotateY(0.5turn);
}

button:hover:after {
  clip-path: polygon(0 0, 0 0, 0 0);
}

 <button type="submit" class="w-full font-bold">Send</button>

Ответ №2:

Вы можете использовать transform: scaleX(-1) для переключения ::after селектора. Вы можете изменить угол наклона 90deg , чтобы темная сторона повернулась вправо.

 button {
  background: #FB5D5D;
  width: 350px;
  height: 54px;
  border-radius: 4px;
  position: relative;
  z-index: 10;
  overflow: hidden;
  color: white;
  border: none;
  transition: clip-path 3s ease, transform 3s ease, -webkit-clip-path 3s ease;
}

button:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, #D92121 0%, #FF6464 100%);
  z-index: -1;
  transition: clip-path .3s ease;
  clip-path: polygon(200% 0, 0 200%, 0 0);
  transform: scaleX(-1);
}

button:hover:after {
  clip-path: polygon(0 0, 0 0, 0 0);
}

 <button type="submit" class="w-full font-bold">Send</button>