Wypełnij element pochyłym tłem na hover

Question

Próbuję utworzyć efekt hover przycisku CSS. Ale nie udało mi się wypełnić elementu ukośnym kształtem.

jaki został zaplanowany efekt aktywowania:

Zrzut ekranu 1: Jak to wygląda w rzeczywistości.

Zrzut 2: Chcę, aby efekt unoszący się wyglądał z pochyloną stroną.

.button_sliding_bg { 
 
    color: #31302B; 
 
    background: #FFF; 
 
    padding: 12px 17px; 
 
    margin: 25px; 
 
    font-family: 'OpenSansBold', sans-serif; 
 
    border: 3px solid #31302B; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    letter-spacing: 1px; 
 
    text-transform: uppercase; 
 
    border-radius: 2px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    box-shadow: inset 0 0 0 0 #31302B; 
 
    -webkit-transition: all ease 0.8s; 
 
    -moz-transition: all ease 0.8s; 
 
    transition: all ease 0.8s; 
 
} 
 
.button_sliding_bg:hover { 
 
    box-shadow: inset 200px 0 0 0 #31302B; 
 
    color: #FFF; 
 
}

<button class="button_sliding_bg">Buttontext</button>

Answer 1

Wierzę, że faktycznie szukasz stanu końcowego, aby wypełnić cały element kolorem tła i nie zostawiać luki. Możesz również zrobić to z obrazkami tła linear-gradient i zmienić ich background-size i background-position, jak w poniższym fragmencie.

Jedną z wad korzystania z linear-gradient przez pseudoelementy lub transformacje jest to, że obsługa przeglądarki jest niższa, ale nie potrzebuje dodatkowych pseudoelementów, więc może pozostawiać je w stanie innym do wykorzystania.

.button_sliding_bg { 
 
    color: #31302B; 
 
    background: #FFF; 
 
    padding: 12px 17px; 
 
    margin: 25px; 
 
    font-family: 'OpenSansBold', sans-serif; 
 
    border: 3px solid #31302B; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    letter-spacing: 1px; 
 
    text-transform: uppercase; 
 
    border-radius: 2px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    background-image: linear-gradient(135deg, #31302B 50%, transparent 51%); 
 
    background-size: 100px 100px; /* some initial size to get the slanted appearance */ 
 
    background-position: -50px -50px; /* negative positioning to hide it initially */ 
 
    background-repeat: no-repeat; 
 
    transition: all ease 0.8s; 
 
} 
 
.button_sliding_bg:hover { 
 
    background-size: 200% 200%; /* 200% because gradient is colored only for 50% */ 
 
    background-position: 0px 0px; /* bring it fully into view */ 
 
    color: #FFF; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<button class="button_sliding_bg">Buttontext</button> 
 
<button class="button_sliding_bg">Button text lengthy</button> 
 
<button class="button_sliding_bg">Button text <br> with line break</button> 
 
<button class="button_sliding_bg">Button text <br> with <br> multiple <br> line <br>breaks</button>

Answer 2

Można użyć css :after.

Jsfiddle

.button_sliding_bg { 
 
    color: #31302B; 
 
    background: #FFF; 
 
    padding: 12px 17px; 
 
    margin: 25px; 
 
    font-family:'OpenSansBold', sans-serif; 
 
    border: 3px solid #31302B; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    letter-spacing: 1px; 
 
    text-transform: uppercase; 
 
    border-radius: 2px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    box-shadow: inset 0 0 0 0 #31302B; 
 
    -webkit-transition: all ease 0.8s; 
 
    -moz-transition: all ease 0.8s; 
 
    transition: all ease 0.8s; 
 
    position: relative; 
 
} 
 
.button_sliding_bg:hover { 
 
    box-shadow: inset 200px 0 0 0 #31302B; 
 
    color: #FFF; 
 
} 
 
.button_sliding_bg:after { 
 
    content:''; 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-width: 0 0 0 0; 
 
    border-color: transparent transparent #fff transparent; 
 
    border-style: solid; 
 
    border-width: 0 0 32px 30px; 
 
    -webkit-transition: all ease 0.8s; 
 
    -moz-transition: all ease 0.8s; 
 
    transition: all ease 0.8s; 
 
}

<button class="button_sliding_bg">Buttontext</button>

Answer 3

Można użyć techniki opisanej w tej odpowiedzi: Fill element from center on hover i pochylić element pseudo więc wypełnia przycisk ze skosem:

div { 
 
    position: relative; 
 
    display: inline-block; 
 
    padding: 15px 70px; 
 
    border: 5px solid #B17461; 
 
    color: #B17461; 
 
    font-size: 30px; 
 
    font-family: arial; 
 
    transition: color .5s; 
 
    overflow:hidden; 
 
} 
 
div:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    width: 130%; height: 100%; 
 
    background: #B17461; 
 
    z-index: -1; 
 
    transform-origin:0 0 ; 
 
    transform:translateX(-100%) skewX(-45deg); 
 
    transition: transform .5s; 
 
} 
 
div:hover { 
 
    color: #fff; 
 
} 
 
div:hover:before { 
 
    transform: translateX(0) skewX(-45deg); 
 
}

<div>BUTTON</div>

Nie zapomnij dodać prefiksów dostawcy do obsługi przeglądarek (więcej informacji znajdziesz w artykule canIuse).