Return to Snippet

Revision: 32582
at September 29, 2010 17:08 by Meander365


Updated Code
button, input[type="submit"], input[type="button"], .button, .button:visited {
		background: #ED9C30 url(images/overlay.png) repeat-x 0 0;
		display: inline-block;
		color: #fff!important;
		text-decoration: none;
		border-radius: 6px;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		/*text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
		position: relative;
		cursor: pointer; 
		behavior: url(../js/plugins/PIE.htc);
		margin:0px;
		vertical-align:top;
		font-weight:bold!important;
		padding:0px 4px!important;
		height:2em;		
		line-height:2em!important;
		border:0px;
		font-size:13px!important;
	}
	
	button:focus, input[type="submit"]:focus, input[type="button"]:focus, .button:focus {outline:none; }
	/* remove moz padding and outline on buttons in FF */
	button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, .button::-moz-focus-inner {border:none; padding:0px;}
		 
	.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {background:#DF830D url(images/overlay.png) repeat-x 0 0;}

Revision: 32581
at September 29, 2010 08:48 by Meander365


Updated Code
button, input[type="submit"], input[type="button"], .button, .button:visited {
		background: #ED9C30 url(images/overlay.png) repeat-x 0 0;
		display: inline-block;
		color: #fff!important;
		text-decoration: none;
		border-radius: 6px;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		/*text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
		position: relative;
		cursor: pointer; 
		behavior: url(../js/plugins/PIE.htc);
		margin:0px;
		vertical-align:top;
		font-weight:bold!important;
		padding:0px 4px!important;
		border-spacing:0px;
		height:2em;		
		line-height:2em!important;
		border:0px;
		font-size:13px!important;
	}
	
	button:focus, input[type="submit"]:focus, input[type="button"]:focus, .button:focus {outline:none; }
	button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, .button::-moz-focus-inner {border:none; }
	/* remove moz padding on buttons */
	 button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { padding:0px; }
	.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {background:#DF830D url(images/overlay.png) repeat-x 0 0;}

Revision: 32580
at September 29, 2010 08:36 by Meander365


Initial Code
button, input[type="submit"], input[type="button"], .button, .button:visited {
		background: #666 url(images/overlay.png) repeat-x 0 0;
		display: inline-block;
		color: #fff!important;
		text-decoration: none;
		border-radius: 6px;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		/*text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
		position: relative;
		cursor: pointer; 
		behavior: url(../js/plugins/PIE.htc);
		margin:0px;
		vertical-align:top;
		font-weight:bold!important;
		padding:0px 4px!important;
		border-spacing:0px;
		height:2em;		
		line-height:2em!important;
		border:0px;
		font-size:13px!important;
		outline:0;
	}
	
	/* remove moz padding on buttons */
	 button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { padding:0px; }
	.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {background:#333 url(images/overlay.png) repeat-x 0 0;}

Initial URL


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

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

Initial Tags
css, button, links

Initial Language
CSS