CSS skewed button

by Ben Clayton

HTML

<div id="myDiv">
<div id="myDivInner">
This div element is skewed 20 degrees along the X-axis.
</div>
</div>

CSS

div#myDiv {
    margin-left:100px;
    margin-top:100px;
    width: 300px;
    height: 100px;
    background-color: orange;
    padding:20px;
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg); /* Standard syntax */
    transition: all 1s;
}

div#myDivInner {
     -ms-transform: skewX(-20deg); /* IE 9 */
    -webkit-transform: skewX(-20deg); /* Safari */
    transform: skewX(-20deg); /* Standard syntax */
    transition: transform 1s;
 
}
div#myDiv:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width: 0; 
    height: 0; 
    border-top: 10px solid white; 
    border-right: 350px solid transparent; 
    border-left: 0px solid transparent; 
    transition: border-right 1s, border-left 1s;
}

div#myDiv:hover {
    -ms-transform: skewX(-20deg); /* IE 9 */
    -webkit-transform: skewX(-20deg); /* Safari */
    transform: skewX(-20deg); /* Standard syntax */
}

div#myDiv:hover #myDivInner {
     -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg); /* Standard syntax */
 
}
div#myDiv:hover:before {
    border-top: 10px solid white; 
    border-right: 0px solid transparent; 
    border-left: 350px solid transparent; 
}