按钮的制作 常用按钮图标设计代码

     用户常常需要通过按钮来进行下一步的操作，或是达到某个目的。作为网页设计中的常见元素之一，按钮必不可少。小编在这里分享几个按钮图标设计常见代码，相信你一定用得到。

1.按钮字号和字型控制
    按钮上显示的文字也可以随意改变风格，可以设置字体的字型和字号，请看以下代码：
< form name="highlight" >
< p align="center" >
< input type="button" value="变化字号"
style="background-color: rgb(192,192,192);
FONT-FAMILY: 宋体; FONT-SIZE: 9pt"
color: rgb(255,2550,0)"); onclick >
< input type="button" value="变化字号"
style="background-color: rgb(192,192,192);
FONT-FAMILY: 宋体; FONT-SIZE: 12pt"
color: rgb(255,2550,0)"); onclick >
< /p >
< /form >
2.按钮的前景与背景控制
    绝大多数的人使用按钮时，都直接使用缺省的灰白色按钮有黑色的文字说明，其实按钮的背景和前景是可以随意改变的，请看下面的代码：
< form name="highlight" >
< p align="center" >< input type=
"button" value="变色按钮"
style="background-color: rgb(255,0,0);
color: rgb(255,2550,0)"
onclick > < /p >
< /form >
3.按钮控制显示源文件
    为了方便别人学习你的网页设计方法，在主页上放置一个按钮，按下该按钮后即自动显示源文件，是不是非常实用？代码如下，放到主页的正文区：
< form method="POST" >
< p align="center" >< input type=
"button" name="B1"
value="显示源文件"
onclick="window.location="
view-source:" +window.location.href" >
< /p >
< /form >
4.关于图片按钮执行js跳转页面时刷新页面的解决方案
具体代码是这样的：
图片按钮
<input type="image" name="imageField2" src="../image/bt_5.gif" onclick="javascript:searchresult();" />
js：
function searchresult()
{
       window.location = "../search/search_generallyresult.aspx?";
}
点击image按钮会照成页面重新刷新，导致跳转出现你不想要的结果，甚至报错……
解决方案(就这么简单)：
<input type="image" name="imageField2" src="../image/bt_5.gif" onclick="javascript:searchresult();return false;" />

（一品威客 SELU）