Füllen Element mit schrägen Hintergrund auf Hover

Question

Ich versuche, eine CSS-Schaltfläche Hover-Effekt zu erstellen. Aber ich habe es nicht geschafft, das Element mit einer schrägen Form zu füllen.

Wie der Hover-Effekt geplant war:

Screenshot 1: Wie es tatsächlich aussieht.

Screenshot 2: Wie ich den Hover-Effekt mit schräger Seite aussehen soll.

.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

Ich glaube, dass Sie tatsächlich nach dem Endzustand suchen, um das gesamte Element mit Hintergrundfarbe zu füllen und die Lücke nicht zu verlassen. Sie können es auch mit linear-gradient Hintergrundbildern tun und ihre background-size und background-position wie im folgenden Ausschnitt übergehen.

Ein Nachteil der Verwendung von linear-gradient über Pseudo-Elemente oder Transformationen ist, dass die Browser-Unterstützung niedriger ist, aber es keine zusätzlichen Pseudo-Elemente benötigt und sie daher für andere Zwecke frei lassen kann.

.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

können Sie CSS :after verwenden.

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

können Sie die Technik in dieser Antwort beschrieben verwenden: Fill element from center on hover und Skew das Pseudo-Element, so dass es auf die Schaltfläche mit einer Neigung füllt:

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>

Vergessen Sie nicht, Hersteller-Präfixe für die Browser-Unterstützung hinzuzufügen (siehe canIuse für weitere Informationen).