Slanted Button - Color Change on Hover

Slanted buttons are quirky, eye-catching, and suggest motion. While not suited to every site, they can add a distinctive flair that helps your design stand out.

The slant effect is created using ::before and ::after pseudo-elements, skewed with transform: skewX(). These elements sit behind the main button using z-index: -1, while the button itself is positioned relatively and given a higher z-index: 1 to stay on top.

Because of the slant, these buttons can be tricky to align vertically with other elements. A little extra margin or padding usually solves it.

For this example, I did a simple background color change on hover. Fortunately, we don't have to change the background color of the pseudo elements as well - that is automatically taken care of by their background: inherit rules.

To adjust the angle, tweak the skewX value. If the slant gets clipped, you may also need to adjust the left and right values of the pseudo-elements.

HTML:

Copy to clipboard

<a href='#'><div id='button-example-1599'>Click here!</div></a>

CSS:

Copy to clipboard

#button-example-1599 {
position: relative;
z-index: 1;
color: #fffff7; 
background-color: #D0A7A2;
padding: 20px 40px;
font-size: 18px; 
font-weight: 600;
width: 200px;
text-align: center;

}
#button-example-1599:hover {
background-color: #364D30;

}
#button-example-1599:before {
content: "";
z-index: -1;
position: absolute;
left: -5%;
top: 0;
height: 100%;
width: 100%;
background-color: inherit;
transform: skewX(-15deg);

}
#button-example-1599:after {
content: "";    
z-index: -1;
position: absolute;
right: -5%;
top: 0;
height: 100%;
width: 100%;
background-color: inherit;
transform: skewX(-15deg);

}

Pumpkins n' Pies