HTML CSS examples for CSS Widget:Button
Circle Buttons with border
<html> <head> <title>Responsive CSS round button</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .round-button {<!--from w ww . ja v a2s .c om--> width:25%; } .round-button-circle { width: 100%; height:0; padding-bottom: 100%; border-radius: 50%; border:10px solid #cfdcec; overflow:hidden; background: #4679BD; box-shadow: 0 0 3px gray; } .round-button-circle:hover { background:#30588e; } .round-button a { display:block; float:left; width:100%; padding-top:50%; padding-bottom:50%; line-height:1em; margin-top:-0.5em; text-align:center; color:#e2eaf3; font-family:Verdana; font-size:1.2em; font-weight:bold; text-decoration:none; } </style> </head> <body> <div class="round-button"> <div class="round-button-circle"> <a href="http://example.com" class="round-button">Button!!</a> </div> </div> </body> </html>