Slanted Button - Color Change on Hover

A button at a slant - for when you want something that evokes quirkiness or movement. Increase the skewX for a deeper slant. Changes color on hover.

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; -webkit-transform: skewX(-15deg); -moz-transform: skewX(-15deg); -ms-transform: skewX(-15deg); transform: skewX(-15deg);

}

#button-example-1599:after {

content: ""; z-index: -1; position: absolute; right: -5%; top: 0; height: 100%; width: 100%; background-color: inherit; -webkit-transform: skewX(-15deg); -moz-transform: skewX(-15deg); -ms-transform: skewX(-15deg); transform: skewX(-15deg);

}

Pumpkins n' Pies

For gluten-free baking enthusiasts and garden lovers: discover delicious, from-scratch recipes featuring sourdough, whole foods, and most importantly – pie! Explore gardening tips from east-central Illinois, along with a byte of code for fellow developers.
 © 2024 Abhishek & Miriam Chaturvedi