在网页中，尤其是那种需要交互性的，都会使用到提交性质的按钮，您不觉得系统默认那些灰灰的按钮太单调了吗，而且不能够吸引访问者的注意力。下面我将通过CSS（网页样式表）和JavaScript把您的网页按钮装扮的富有个性化，您也可以试着用这种方法来把按钮做的和页面整体风格一致。
首先，运用CSS定义按钮的整体风格，您可以把下面的代码放到网页的头部<head></head>之间。
<style type="text/css">
<!--
input
{
BACKGROUND-COLOR: #FAFAFA;
BORDER-BOTTOM: #006A00 1px solid;
BORDER-LEFT: #A1A1A1 1px solid;
BORDER-RIGHT: #A1A1A1 1px solid;
BORDER-TOP: #A1A1A1 1px solid;
COLOR: #000000;
FONT-SIZE: 12px
}
--></style> |
代码说明：
|
input{}：
|
是说明我们要对HTML使用的具有<input>标记的语句(也就是按钮啦)进行属性定义；
|
|
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中关于边框属性定义是一致的，我觉得就实线和虚线在按钮边框的表现还不错，其它效果并不是很美观。
您可以充分发挥你的创造力，设置按钮边框不同的明暗度颜色，就可以创造出具有个性化颜色的立体按钮来了。怎么样，经过这样的设置后，您的按钮是不是比原来漂亮了许多呢？
接着，通过JavaScript编程可以让您的按钮上的文字闪烁起来，这样可以吸引更多的访问者去点击它，具体的调用过程和JavaScript代码如下：
<body>
<!--调用代码部分-->
<form method="POST" action="--WEBBOT-SELF--">
<input type=submit name=SUB value=闪烁按钮 id=flashit>
</form>
<!--JavaScript程序开始-->
<script>
//当网页页面内容完全下载后执行按钮闪烁
if (document.all&&document.all.flashit)
{
var flashelement=document.all.flashit
if (flashelement.length==null)
flashelement[0]=document.all.flashit
//定义函数来实现按钮字体颜色的变换完成闪烁
function changecolor(which)
{
if (flashelement[which].style.color=='#800000')
//这里的#800000必须和下面的#800000一致，如果为空则按网页初始定义的按钮文字颜色
flashelement[which].style.color="#0063A4"
//要改变的颜色
else
flashelement[which].style.color="#800000"
}
//上面的语句含义如果颜色为#800000就把颜色变为#0063A4，反之颜色为#800000
if (flashelement.length==null)
setInterval("changecolor(0)",1000)
else
for (i=0;i<flashelement.length;i++)
{
var tempvariable='setInterval("changecolor('+i+')",'+'1000)'
eval(tempvariable)
}
//设置颜色变换的时间，1000表示每隔1秒钟文字颜色改变一次，
从而达到文字在两种不同颜色之间切换的功能，实现闪烁效果
}
</script>
</body> |
记住在网页中加入JavaScript代码后，在调用时一定要在input的id设置处标记flashit这个标记，也就是下面这段代码。
| <input type=submit name=SUB value=闪烁按钮
id=flashit> |
现在看看您按钮上的文字是不是在一闪一闪的了？赶快试一试吧，我相信通过我的抛砖引玉您一定能做出更加酷酷的按钮来。
