HTML CSS examples for CSS Widget:Button
Add arrow to the right of a rounded rectangle "next" button
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> a.next {<!-- w ww . ja v a 2s . c om--> padding: 6px 21px 6px 12px; border-width: 1px !important; border-color: #333 !important; background: blue; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='blue', endColorstr='#20CA00'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(blue), to(#20CA00)); /* for webkit browsers */ background: -moz-linear-gradient(top, blue, #20CA00); /* for firefox 3.6+ */ border-radius: 6px 0 0 6px !important; border-style: solid none solid solid !important; position: relative; overflow-y: hidden; } a.next:before { content: ''; display: block; width: 0px; height: 0px; border-top: 16px solid #ffffff; border-left: 16px solid transparent; border-bottom: 16px solid transparent; position: absolute; top: -1px; right: 0; z-index: 2; } a.next:after { content: ''; display: block; width: 0px; height: 0px; border-top: 16px solid transparent; border-left: 16px solid transparent; border-bottom: 16px solid #ffffff; position: absolute; bottom: -1px; right: 0; z-index: 2; } a.next span:before { content: ''; display: block; width: 0px; height: 0px; border-top: 16px solid #333; border-left: 16px solid transparent; border-bottom: 16px solid transparent; position: absolute; top: -1px; right: 1px; z-index: 1; } a.next span:after { content: ''; display: block; width: 0px; height: 0px; border-top: 17px solid transparent; border-left: 17px solid transparent; border-bottom: 17px solid #333; position: absolute; bottom: -1px; right: 0; z-index: 1; } </style> </head> <body> <div style="padding: 20px;"> <a class="next" href="#"> <span>Next</span> </a> </div> </body> </html>