www.baike369.com
百科369 > CSS教程 > CSS制作平面按钮

CSS制作平面按钮


CSS制作平面按钮

默认的按钮样式有点儿三维效果,有时为了与页面风格统一,需要将按钮设置为平面效果。


实例

下面是一个制作平面按钮的例子。源代码如下:

<!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/html; charset=gb2312" />
<title>CSS制作平面按钮实例-www.baike369.com</title>
</head>
<body>
<input type="submit" value="保存" style="border:1px;solid:#666;height:35px;width:50px;font-size:14px;background-color:#E8E8FF;color:#666;" name="submit" />
<input id="Button1" type="button" value="保存" style="height:35px;width:50px;font-size:14px;" />
</body>
</html>

平面按钮与普通按钮的对比效果如下图所示:

CSS制作平面按钮实例

Copyright© 2011-2016 www.baike369.com All Rights Reserved