在网页中，尤其是那种需要交互性的，都会使用到提交性质的按钮，您不觉得系统默认那些灰灰的按钮太单调了吗，而且不能够吸引访问者的注意力。下面我将通过CSS（网页样式表）和Javascript把您的网页按钮装扮的富有个性化，您也可以试着用这种方法来把按钮做的和页面整体风格一致。

首先，运用CSS定义按钮的整体风格，您可以把下面的代码放到网页的头部之间。
　

代码说明：
　

input{}：	是说明我们要对HTML使用的具有标记的语句(也就是按钮啦)进行属性定义；
BACKGROUND-COLOR：	定义按钮的背景颜色，一般使用标准的十六进制表示法；
BORDER-BOTTOM：	定义按钮下边框边框线的属性。"#006A00"表示边框线颜色，"1px"表示下边框边框线的宽度，"solid"表示边框线为实线；
BORDER-LEFT：	定义按钮的左边框边框线的属性；
BORDER-RIGHT：	定义按钮的右边框边框线的属性；
BORDER-TOP：	定义按钮的上边框边框线的属性；
COLOR：	定义按钮上文字的颜色；
FONT-SIZE：	按钮文字的大小；

注意：
边框线的常见属性包括：1.实线 solid；2.虚线 dotted；3.破折号 dashed；4.双线 double；5.凹线 groove；6.凸线 ridge；7.嵌入 inset；8.开端 outset。

细心的朋友会发现这和FrontPage中关于边框属性定义是一致的，我觉得就实线和虚线在按钮边框的表现还不错，其它效果并不是很美观。

您可以充分发挥你的创造力，设置按钮边框不同的明暗度颜色，就可以创造出具有个性化颜色的立体按钮来了。怎么样，经过这样的设置后，您的按钮是不是比原来漂亮了许多呢？

[@more@]

ITPub博客

让网页中的按钮靓起来(转)

最新文章