如何给提交按钮做css样式

Posted 2023-04-21

<form method="post" action=""> <input name="input1" type="submit" value="点我" /> </form> 现在有如上一个按钮，就是网页中最基本的形状。 请问如何用css将它样式化？

参考技术A <input
type="submit"
name="button"
id="button"
value="提交"
style="
border:none;
height:20px;
width:100px;
background:url(img134.tif)"
/>
在style中加入css就可以，需要注意的一点是，加背景图片的时候，边框按自己需求显示，默认是有边线的，
即border:的设置

CSS CSS格式链接，按钮和提交是相同的样式（跨浏览器）

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;}