HTML CSS examples for CSS Widget:Button
Create button with a transparent border on the second part of the button
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> * {<!-- w ww . j a v a 2 s . c o m--> margin:0; padding:0; } body { background-image: url("https://www.java2s.com/style/demo/Google-Chrome.png"); } button { background:none; border:none; } header { height:100px; background-color: rgba(41, 52, 61, .8); position:relative; } .contact { float:right; width:auto; position:relative; height:100%; right:20%; } button { top: 100%; position: absolute; width: 90px; margin-top:-28px; height:56px; border-radius:0px 0px 14px 14px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(41, 52, 61, .8) 50%,rgba(41, 52, 61, .8) 100%); } button:after{ content:'login'; position:absolute; left:10px; top:10px; width:70px; height:15px; padding:10px 0px; background:orange; border-radius:10px; } </style> </head> <body> <header> <div class="contact"> lorem ipsum <button></button> </div> </header> </body> </html>