Customized buttons - rounded corners


/ Published in: CSS

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.


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.