Advanced Search

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

/ Published in: CSS
Save to your folder(s)
This also use PIE.htc to force rounded corners in IE.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.