горизонтальное заполнение кнопки

Question

помогите реализовать такую фигуру слева необходимо ставить как бэкграунд и перекрывать этим бэкраундом при наведении? у меня что-то не получается

Answer 1

Это будет работать, если Вы сделаете фигуру изображением .png и она будет иметь ширину и высоту не меньше, чем блок

span {
  border: 2px solid #0078b8;
  border-radius: 10px;
  padding: 20px 40px;
  color: #0078b8;
  font-size: 30px;
  background: url(https://i.ibb.co/TLYY269/bg.png);
  background-position: -368px center;
  background-repeat: no-repeat;
  width: 200px;
  display: block;
  transition: all .2s linear;
}

span:hover {
  color: white;
  background-position: 0px center;
}

<span>Ccc</span>

Answer 2

Можно и без фоновой картинки обойтись:

span {
  border: 2px solid #0078b8;
  border-radius: 10px;
  padding: 20px 40px;
  color: #0078b8;
  font-size: 30px;
  overflow: hidden;
  width: 200px;
  display: block;
  transition: all .2s linear;
  position: relative;
}

span:before,
span:after {
  content: '';
  display: block;
  background-color: #0078b8;
  width: calc(100% + 40px);
  position: absolute;
  left: calc(-100% - 20px);
  transition-duration: 0.2s;
  z-index: -1;
}

span:before {
  top: 0;
  bottom: calc(50% - 6px);
  border-radius: 0 4px 10px 0;
  transform: skewX(15deg);
}

span:after {
  top: calc(50% - 6px);
  bottom: 0;
  border-radius: 0 10px 4px 0;
  transform: skewX(-15deg);
}

span:hover {
  color: white;
  background-position: 0px center;
}

span:hover:before,
span:hover:after {
  left: -20px;
}

<span>Ccc</span>

БЛОГ НА HUSL

горизонтальное заполнение кнопки

Ответы (2 шт):