Advanced Search

One pixel, pure CSS2 rounded buttons

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title></title>
  6.  
  7.  
  8. <style type="text/css">
  9. <!--
  10. ul.round { margin: 0; padding: 0; border: 0; list-style-type: none; text-align: center; float: left; clear: left; }
  11. ul.round li, ul.round li a, ul.round li b { display: block; margin: 0; padding: 0; float: left; }
  12.  
  13. /* configure (backgrounds + margins + heights) here */
  14. ul.round li { margin-right: 5px; background: #069; }
  15. ul.round li a { height: 32px; text-decoration: none; color: #fff; cursor: pointer; }
  16. ul.round li a:hover { background: #000; }
  17. ul.round li b { width: 1px; height: 30px; border-bottom: #fff 1px solid; border-top: #fff 1px solid; }
  18. ul.round li span { padding: 10px; line-height: 10px; float: left; }
  19. -->
  20. </style>
  21.  
  22.  
  23. </head>
  24.  
  25. <body>
  26.  
  27.  
  28.  
  29. <ul class="round">
  30. 	<li><a href="#"><b></b><span>test</span><b></b></a></li>
  31. 	<li><a href="#"><b></b><span>big test</span><b></b></a></li>
  32. 	<li><a href="#"><b></b><span>bigger test</span><b></b></a></li>
  33. </ul>
  34.  
  35.  
  36.  
  37. </body>
  38. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.