Advanced Search

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

Expand | Embed | Plain Text

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.