Slanted Button - Outline to Color on Hover

Slanted buttons add motion and visual interest, making them a bold stylistic choice. The slant is achieved with ::before and ::after pseudo-elements skewed using transform: skewX(). These elements sit behind the main button using z-index: -1, while the main element stays on top at z-index: 1. By using background: inherit, the background of the pseudo-elements updates automatically when the button’s background changes.

You may need to adjust margins or padding to account for the visual offset the skew introduces. To fine-tune the slant, change the skewX angle, and tweak the left and right values if clipping occurs.

Creating a clean outline on a slanted button is trickier than it looks. Initially, I added the border to the base div, but it didn’t align properly with the skewed pseudo-elements, resulting in a jarring mismatch. The solution: apply the border only to the ::before and ::after elements. To avoid a visible overlap where they meet, the left border is removed from the ::after element. This approach keeps the outline seamless, even though it’s made from multiple layers.

HTML:

Copy to clipboard

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

CSS:

Copy to clipboard

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

}
#button-example-1602:hover {
background-color: #652F2A; 
color: #fff;

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

}
#button-example-1602:after {
content: "";    
z-index: -1;
position: absolute;
right: -5%;
top: 0;
height: 100%;
width: 100%;
background-color: inherit;
border: 2px solid #652F2A; 
border-left: none;
transform: skewX(-15deg);

}

Pumpkins n' Pies