.box.slant-box {

}

.open-wear-wrapper {
  position: relative;
  max-width: 220px;
  margin: 100px auto;
  overflow: hidden;
}

.open-wear-button {
    font-family: 'Roboto', sans-serif, system-ui;
    padding: 22px 55px 28px;
    font-weight: 700;
    margin: auto;
    text-align: center;
    position: relative;
    background: #f04939; background: var(--accent-color);
    color: #4f575c; color: var(--dark-color);
    -webkit-transition: background .85s cubic-bezier(.165,.84,.44,1);
    -o-transition: background .85s cubic-bezier(.165,.84,.44,1);
    transition: background .85s cubic-bezier(.165,.84,.44,1);
    letter-spacing: 1px;
}


.slant {
  position: absolute;
    -webkit-transform: skewY(-2.8deg);
    -ms-transform: skewY(-2.8deg);
        transform: skewY(-2.8deg);
    height: 14px;
    bottom: -7px;
    background: #5b646a; background: var(--bg-color);
    -webkit-transition: -webkit-transform .85s cubic-bezier(.165,.84,.44,1);
    transition: -webkit-transform .85s cubic-bezier(.165,.84,.44,1);
    -o-transition: transform .85s cubic-bezier(.165,.84,.44,1);
    transition: transform .85s cubic-bezier(.165,.84,.44,1);
    transition: transform .85s cubic-bezier(.165,.84,.44,1), -webkit-transform .85s cubic-bezier(.165,.84,.44,1);
    width: calc(100% + 2px);
    left: -1px;
}

.open-wear-button:hover .slant{
      -webkit-transform: skewY(2.8deg);
          -ms-transform: skewY(2.8deg);
              transform: skewY(2.8deg);
}