Fill an element with an oblique background on hover

Question

I am trying to create a CSS button hover effect . But I was not able to fill the element with a beveled shape.

How the hover effect was planned:

Screenshot 1: How it really looks.

Screenshot 2: How I want the hover effect to look from the sloping side.

.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

I believe that you are really looking for the final state to fill the entire element with background color and not leave a space. You can also do this with linear-gradient background images and translate their background-size and background-position , as in the snippet below.

One of the drawbacks of using linear-gradient over pseudo-elements or transformations is that browser support is lower, but additional pseudo-elements are not needed for this, and therefore they can leave them spare for other uses.

 .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

You can use the technique described in this answer: Fill an element from the center on hover and skew the pseudo-element so that it fills the button with a tilt:

 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> 

Remember to add vendor prefixes for browser support (see canIuse for more information).

Answer 3

You can use 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>