Advanced Search

Customized buttons - rounded corners

/ Published in: CSS
Save to your folder(s)
CSS code for input buttons with background images and rounded corners. For cases when it is not possible to use Progressive Enhancement (ie. when you need to have rounded corners in IE6+).
See Customized buttons under HTML for markup.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. .btnWrap {
  2. 	background-position:100% 0;
  3. 	background-repeat:no-repeat;
  4. 	display:inline-block;
  5. 	padding-right:3px;
  6. }
  7. .btn {
  8. 	background-position:0 0;
  9. 	background-repeat:no-repeat;
  10. 	border-style:none;
  11. 	border-width:0;
  12. 	height:22px;
  13. 	padding:0 3px 2px 0;
  14. }
  15. .loginBtn {
  16. 	background-color: transparent;
  17. 	background-image: url(../images/buttons.png);
  18. 	color:#000;
  19. }
  20. .loginBtn:hover {
  21. 	color:#666;
  22. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.