Antialiased Skewed Button with CSS

Glenn Blog 0 Comments

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.

[css]

.skew-button {
border: none;
color: white;
background:#839D36;
padding: 0.579em 1.105em 0.842em;
box-shadow:
-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;
translateZ(0);
will-change: transform;
}
.skew-button:hover {
background: grey;
box-shadow:
-1px -0px 0px #727579,-0px -1px 0px #E6E8E8,
-2px -1px 0px #727579,-1px -2px 0px #E6E8E8,
-3px -2px 0px #727579,-2px -3px 0px #E6E8E8
}
[/css]

Example

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

Glenn

A highly experienced WordPress Web Developer, Front-end and 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.

Leave a Reply

Your email address will not be published. Required fields are marked *