Antialiased Skewed Button with CSS

Heres some CSS we used recently for a client site that gives a nice Skewed Button and a cool 3D shadow effect with CSS. The code includes a fix for jagged edges on the button so it’s antialiased / nice and smooth.

.skew-button {
border: none;
color: white;
padding: 0.579em 1.105em 0.842em;
-1px -0px 0px #AED148,-0px -1px 0px #E3EBA7,
-2px -1px 0px #AED148,-1px -2px 0px #E3EBA7,
-3px -2px 0px #AED148,-2px -3px 0px #E3EBA7;
-ms-transform: skewX(-9deg);
-webkit-transform: skewX(-9eg);
transform: skewX(-9deg);
/* antialiasing */
outline: 1px solid transparent;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
will-change: transform;
.skew-button:hover {
background: grey;
-1px -0px 0px #727579,-0px -1px 0px #E6E8E8,
-2px -1px 0px #727579,-1px -2px 0px #E6E8E8,
-3px -2px 0px #727579,-2px -3px 0px #E6E8E8


Skewed Button with Cool Shadow CSS

Ultimately we completely rebranded the client so we thought we’d share this with you all.

About the Author
Antialiased Skewed Button with CSS 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g


A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.