css中模拟按钮的背景色改变

html-css016

css中模拟按钮的背景色改变,第1张

将li的padding值设为0，给a设一个padding值就可以了。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

ul{list-style:nonefont-weight:bold}

li{float:leftmargin:0px 10pxbackground:#333333}

li a{display:blockbackground:#333333padding:5px}

li a:link,li a:visited{text-decoration:nonecolor:#FF0000}

li a:hover{text-decoration:nonecolor:#ffffffbackground:#cccccc}

</style>

</head>

<body>

<ul>

<li><a href="#">导航一</a></li>

<li><a href="#">导航二</a></li>

<li><a href="#">导航三</a></li>

</ul>

</body>

</html>

css按钮：

html:

<button class="btn">按钮</button>

css:

.btn {

display:block

height:24px

line-height:24px

text-align:center

padding:0 12px

border-radius:2px

background:#f2f2f2

border:1px solid #dbdbdb

}

.btn:hover {

background:#f7f7f7

border-color:#c6c6c6

}

做的应该差不多吧，HTML5,CSS3的

<input type=button style="background:red" value="按钮" />

或

<input type=button style="background:url(aa.jpg)" value="按钮" />