Posted By

Meander365 on 09/29/10


Tagged

css button links submit


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

jplr


CSS Format Links, Buttons and Submits To Be The Same Style (Cross Browser)


 / Published in: CSS
 

This also use PIE.htc to force rounded corners in IE.

  1. button, input[type="submit"], input[type="button"], .button, .button:visited {
  2. background: #ED9C30 url(images/overlay.png) repeat-x 0 0;
  3. display: inline-block;
  4. color: #fff!important;
  5. text-decoration: none;
  6. border-radius: 6px;
  7. -moz-border-radius: 6px;
  8. -webkit-border-radius: 6px;
  9. /*text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
  10. position: relative;
  11. cursor: pointer;
  12. behavior: url(../js/plugins/PIE.htc);
  13. margin:0px;
  14. vertical-align:top;
  15. font-weight:bold!important;
  16. padding:0px 4px!important;
  17. height:2em;
  18. line-height:2em!important;
  19. border:0px;
  20. font-size:13px!important;
  21. }
  22.  
  23. button:focus, input[type="submit"]:focus, input[type="button"]:focus, .button:focus {outline:none; }
  24. /* remove moz padding and outline on buttons in FF */
  25. button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, .button::-moz-focus-inner {border:none; padding:0px;}
  26.  
  27. .button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {background:#DF830D url(images/overlay.png) repeat-x 0 0;}

Report this snippet  

You need to login to post a comment.