Change button shape to parallelogram - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Button

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Button

Description

Change button shape to parallelogram

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <title>Button skew without text skew</title> 
  <style>

li {<!--from  w w  w. java2  s  . c o m-->
   border: 0px;
   display: inline-block;
   position: relative;
   z-index: 1;
   border: 0px solid #000000;
   background-color: transparent;
   font-family: Futura, Tahoma, sans-serif;
   color: #ffffff;
   padding: 25px;
   margin-left: 20px;
}
li::after {
   content: "'";
   color: transparent;
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0px;
   top: 0px;
   z-index: -1;
   border-radius: 3px;
   background-color: #cc0323;
   transform: skew(-30deg);
   -webkit-transform: skew(-30deg);
   -o-transform: skew(-30deg);
   -moz-transform: skew(-30deg);
   -ms-transform: skew(-30deg);
}

      </style> 
 </head> 
 <body> 
  <li>A Button</li>  
 </body>
</html>

Related Tutorials