Make ribbon shaped button - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Button

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

Description

Make ribbon shaped button

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

body {<!--   w w w  .  j a v  a2  s.c  o m-->
   background-color: #4F4135;
}
.border-right {
   font-size: 0px; line-height: 0%; width: 0px;
   width: 0px;
   border-top: 50px solid #93D1C1;
   border-bottom: 50px solid #4F4135;
   border-left: 50px solid #93D1C1;
   border-right: 50px solid #93D1C1;
   display: inline-block;
}
.border-wrong {
   width: 100px;
   background-color: #93D1C1;
   display: inline-block;
   position: relative;
   z-index: 1;
   text-align: center;
   padding-top: 10px;
}
.border-wrong:after {
   position: absolute;
   content: "";
   z-index: -1;
   left: 0;
   right: 0;
   width: 0px;
   background-color: #93D1C1;
   border-top: 25px solid #93D1C1;
   border-bottom: 25px solid #4F4135;
   border-left: 50px solid #93D1C1;
   border-right: 50px solid #93D1C1;
   display: inline-block;
   text-align: center;
}


      </style> 
 </head> 
 <body translate="no"> 
  <img src="https://www.java2s.com/style/demo/Safari.png" width="700"> 
  <br> 
  <div class="border-right"></div> 
  <div class="border-wrong">
    MENU ITEM 
  </div>  
 </body>
</html>

Related Tutorials