как сделать такую кнопку?

Question

очень нужна такая кнопка ASAP! хотябы что-то похожее, прошу можно и без смены цвета внизу, просто статичный цвет, главное чтобы текст стоял также как и на фото

Answer 1

вам что-то подобное нужно? (со шрифтами и цветами не игрался)

.btn {
  position: relative;
  transform-style: preserve-3d;
  
  width: 250px;
  height: 50px;
  line-height: 50px;
  
  text-align: right;
  font-size:  24px;
  font-family: Calibri;
  
  color: white;
  padding-right: 50px;
}

.btn:before {
  content: '>';
  display:  block;
  position: absolute;
  transform: translateZ(-1px);
  left: 0;
  top: 0;

  width:  50px;
  height: 50px;
  
  background: red;
}

.btn:after {
  content: '';
  display:  block;
  position: absolute;
  transform: translateZ(-1px);
  left: 50px;
  top: 0;

  border-style: solid;
  border-width: 50px 0 0 20px;
  border-color: transparent transparent transparent red;

  width:  calc(100% - 50px - 50px);
  height: 0px;
  
  background: blue;
}

<div class = "btn">Коллекция</div>

БЛОГ НА HUSL

как сделать такую кнопку?

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