form button styling


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

original source - http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/

Overides default styling


Copy this code and paste it in your HTML
  1. <button value="submit" class="submitBtn"><span>Submit</span></button>
  2.  
  3. /* REQUIRED BUTTON STYLES: */
  4. button {
  5. position: relative;
  6. border: 0;
  7. padding: 0;
  8. cursor: pointer;
  9. overflow: visible; /* removes extra side padding in IE */
  10. }
  11.  
  12. button::-moz-focus-inner {
  13. border: none; /* overrides extra padding in Firefox */
  14. }
  15.  
  16. button span {
  17. position: relative;
  18. display: block;
  19. white-space: nowrap;
  20. }
  21.  
  22. @media screen and (-webkit-min-device-pixel-ratio:0) {
  23. /* Safari and Google Chrome only - fix margins */
  24. button span {
  25. margin-top: -1px;
  26. }
  27. }
  28.  
  29.  
  30. /* OPTIONAL BUTTON STYLES for applying custom look and feel: */
  31. button.submitBtn {
  32. padding: 0 15px 0 0;
  33. margin-right:5px;
  34. font-size:2em;
  35. text-align: center;
  36. background: transparent url(images/btn_blue_sprite.gif) no-repeat right -140px;
  37. }
  38.  
  39. button.submitBtn span {
  40. padding: 13px 0 0 15px;
  41. height:37px;
  42. background: transparent url(images/btn_blue_sprite.gif) no-repeat left top;
  43. color:#fff;
  44. }
  45.  
  46. button.submitBtn:hover, button.submitBtnHover { /* the redundant class is used to apply the hover state with a script */
  47. background-position: right -210px;
  48. }
  49.  
  50. button.submitBtn:hover span, button.submitBtnHover span {
  51. background-position: 0 -70px;
  52. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.