HTML CSS examples for CSS Widget:Button
Bordered button with slated corner with CSS
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from w w w . ja va 2 s. c o m--> background-color: #000; color: #fff; } p { margin-top: 50px; } .btn-note { display: block; width: 320px; height: 80px; font-family: sans-serif; font-size: 36px; position: relative; color: #00ABE2; padding: 6px; text-decoration: none; text-transform: uppercase; background: #00ABE2; } .btn-note:before { content: ""; position: absolute; bottom: 0; right: 0; border-width: 35px 35px 0 0; border-style: solid; border-color: #00ABE2 #000; } .btn-note span{ padding: 19px 10px; display: block; background: #000; } .btn-note:hover { text-decoration: none; color: #fff; border-color: #fff; } </style> </head> <body> <p>HTML & CSS:</p> <a class="btn-note" href="#" role="button"> <span>gratis pr?ve</span> </a> <p>Example image:</p> <img src="https://www.java2s.com/style/demo/Firefox.png"> </body> </html>