如何给提交按钮做css样式

html-css020

如何给提交按钮做css样式,第1张

<input

type="submit"

name="button"

id="button"

value="提交"

style="

border:none

height:20px

width:100px

background:url(img134.tif)"

/>

在style中加入css就可以,需要注意的一点是,加背景图片的时候,边框按自己需求显示,默认是有边线的,

即border:的设置

非IE6浏览器,可以使用input:hover的伪类来控制样式,但IE6浏览器只能用JS来实现了,需要设定两个状态,然后用JS切换类。

<style>

#c_button { width:92pxheight:30px border:0float:left}

.c_up{background:url(../images/i_login_btn.png) no-repeat 0 top}

.c_down{background:url(../images/i_login_btn.png) no-repeat 0 bottom}

</style>

<input name="" id="c_button" class="c_up" type="submit" value="" title="点击登录"/>

<script type="text/javascript">

document.getElementById("c_button").onmouseover=function() {this.className = "c_down"}

document.getElementById("c_button").onmouseout=function(){this.className = "c_up"}

</script>