网站按钮制作（制作网站质感按钮）

本文目录一览：

1、网页的那个按钮怎么做
2、1、网页中按钮的常见类型有哪些？ 2、网页中按钮的特点有哪些？ 3、按钮的设计要点有哪些？
3、如何制作好看的网页按钮
4、网页中的按钮怎么做
5、请问网页制作中按钮的制作

网页的那个按钮怎么做

那个Button是控件，

你可以添加HTMLbutton控件，input type="button" id="btn" value="button"/

或者服务器控件

asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" /

或者你可以通过一些网页编辑软件DW,或者微软的visual studio在设计模式下直接拖到你想要的位置

下面是一些参考

asp.net之所以现在开发方便和快捷，关键是它有一组强大的控件库，包括web服务器控件,web用户控件，web自定义控件，html服务器控件和html控件等。这里我主要说说html控件、html服务器控件和web服务器控件的区别。

1、html控件:就是我们通常的说的html语言标记，这些语言标记在已往的静态页面和其他网页里存在,不能在服务器端控制的，只能在客户端通过javascript和vbscript等程序语言来控制。input type="button" id="btn" value="button"/

2、html服务器控件:其实就是html控件的基础上加上runat="server"所构成的控件.它们的注意区别是运行方式不同，html控件运行在客户端，而html服务器控件是运行在服务器端的。参考其他资料是这样说的: 当ASP.NET 网页执行时，会检查标注有无runat 属性，如果标注没有设定，那么Html标注就会被视为符串，并被送到字符串流等待送到客户端，客户端的浏览器会对其进行解释；如果Html标注有设定runat="server" 属性，Page 对象会将该控件放入控制器，服务器端的代码就能对其进行控制，等到控制执行完毕后再将Html服务器控件的执行结果转换成Html标注，然后当成字符串流发送到客户端进行解释input id="Button" type="button" value="button" runat="server" /

3、web服务器控件:也称asp.net服务器控件，是Web Form编程的基本元素，也是asp.net所特有的。它会按照client的情况产生一个或者多个html控件，而不是直接描述html元素。如： asp:Button ID="Button2" runat="server" Text="Button"/那么它和html服务器控件有什么区别呢?参照其他网页的资料看法如下：

1)、Asp.net服务器控件提供更加统一的编程接口，如每个Asp.net服务器控件都有Text属性。

2)、隐藏客户端的不同，这样程序员可以把更多的精力放在业务上，而不用去考虑客户端的浏览器是ie还是firefox，或者是移动设备。

3)、Asp.net服务器控件可以保存状态到ViewState里，这样页面在从客户端回传到服务器端或者从服务器端下载到客户端的过程中都可以保存。

4)、事件处理模型不同，Html标注和Html服务器控件的事件处理都是在客户端的页面上，而Asp.net服务器控件则是在服务器上，举例来说：

input id="Button4" type="button" value="button" runat="server"/是Html服务器控件，此时我们点击此按钮，页面不会回传到服务器端，原因是我们没有为其定义鼠标点击事件。

input id="Button4" type="button" value="button" runat="server" onserverclick="test" /我们为Html服务器控件添加了一个onserverclick事件，点击此按钮页面会发回服务器端，并执行test(object sender, EventArgs e)方法。

asp:Button ID="Button2" runat="server" Text="Button" /是Asp.net服务器控件，并且我们没有为其定义click，但是我们点击时，页面也会发回到服务器端。

由此可见：Html标注和Html服务器控件的事件是由页面来触发的，而Asp.net服务器控件则是由页面把Form发回到服务器端，由服务器来处理。

4、下面我就结合我自己的测试来说明问题：

这段代码是我放在repeat中的模板里的:其中DeleteCheck是一个js脚本函数，注意是用于是否发送到服务器端的，这里就不展示脚本代码了。

input runat="server" type="button" id="delete" value="Server button" /

input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" /

input runat="server" type="submit" onclick="return DeleteCheck(this)" id="Button2" value="Server submit" /

input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" /

button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button"Button-Button/button

asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" /

展现出来的html代码如下：

input name="Data$ctl03$delete" type="button" id="Data_ctl03_delete" value="Server button" /

input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" /

input name="Data$ctl03$Button2" type="submit" id="Data_ctl03_Button2" onclick="return DeleteCheck(this)" value="Server submit" /

input ut type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" /

button id="Data_ctl03_button4" onclick="return DeleteCheck(this)" value="Button-Button"Button-Button/button

input type="submit" name="Data$ctl03$button5" value="Asp:button" onclick="return DeleteCheck(this);" id="Data_ctl03_button5" /

可以看出以下几点:

1、当控件属性中有runat="server"时，生成的html控件时name和id发生的变化(.net Framework)。

2、当asp:button服务器按钮通过生成的页面后转化成类型为submit类型的Client控件。

3、当控件是html控件时通过生成的页面和原来的html代码完全一样(理由上面已经说名)。

另外我还测试了把这段代码直接放到form标记中(不放到其他子标记中)如:

input runat="server" type="button" id="delete" value="Server button" onserverclick="delete_ServerClick" /

input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" /

input runat="server" type="submit" onclick="return DeleteCheck(this)" id="Button2" value="Server submit" /

input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" /

button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button"Button-Button/button

asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" OnClick="button5_Click" /

asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click"LinkButton/asp:LinkButton直接放到form标记中生成的html代码

script type="text/javascript"

!--

var theForm = document.forms['form1'];

if (!theForm) {

theForm = document.form1;

}

function __doPostBack(eventTarget, eventArgument) {

i f (!theForm.onsubmit (theForm.onsubmit() != false)) {

theForm.__EVENTTARGET.value = eventTarget;

theForm.__EVENTARGUMENT.value = eventArgument;

theForm.submit();

}

// --

/script

input language="javascript" onclick="__doPostBack('delete','')" name="delete" type="button" id="delete" value="Server button" /

input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" /

input name="Button2" type="submit" id="Button2" onclick="return DeleteCheck(this)" value="Server submit" /

input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" /

button id="button4" onclick="return DeleteCheck(this)" value="Button-Button"Button-Button/button

input type="submit" name="button5" value="Asp:button" onclick="return DeleteCheck(this);" id="button5" /

a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')"LinkButton/a

这里有可以看出几点：

1、当html服务器控件在服务器端添加了服务器事件后生成的代码变为:onclick="_doPostBack()"，实际上是调用脚本把整个窗体提交到服务器(如果没有添件服务器事件而只是添加了runat="server"是不会发送到服务器端的)这里注意如果要在html服务器控件中添加一个客户端事件如上面的 input runat="server" type="button" id="delete" value="Server button" onserverclick="delete_ServerClick" /变成 input runat="server" type="button" id="delete" value="Server button" onclick="return DeleteCheck(this)" onserverclick="delete_ServerClick" /那样生成的html代码变成 input language="javascript" onclick="return DeleteCheck(this) __doPostBack('delete','')" name="delete" type="button" id="delete" value="Server button" /提示有脚本错误原因是onclick事件执行了2个脚本且书写的格式不正确。onclick="return DeleteCheck(this)；_doPostBack()"这样的话就只能执行第一个函数而第二个函数就不能执行了(return).如果用onclick="return DeleteCheck(this)，_doPostback()"是指2个函数同时都要执行没有影响(相当于一条语句)。在我的一个项目中需要对于控件进行区分总结，我在网上找了找加上自己的实际测试总结如下：

2、html服务器控件:其实就是html控件的基础上加上runat="server"所构成的控件.它们的注意区别是运行方式不同，html控件运行在客户端，而html服务器控件是运行在服务器端的。参考其他资料是这样说的: 当ASP.NET 网页执行时，会检查标注有无runat 属性，如果标注没有设定，那么Html标注就会被视为字符串，并被送到字符串流等待送到客户端，客户端的浏览器会对其进行解释；如果Html标注有设定runat="server" 属性，Page 对象会将该控件放入控制器，服务器端的代码就能对其进行控制，等到控制执行完毕后再将Html服务器控件的执行结果转换成Html标注，然后当成字符串流发送到客户端进行解释input id="Button" type="button" value="button" runat="server" /

1)、 Asp.net服务器控件提供更加统一的编程接口，如每个Asp.net服务器控件都有Text属性。

2)、隐藏客户端的不同，这样程序员可以把更多的精力放在业务上，而不用去考虑客户端的浏览器是ie还是firefox，或者是移动设备。

3)、 Asp.net服务器控件可以保存状态到ViewState里，这样页面在从客户端回传到服务器端或者从服务器端下载到客户端的过程中都可以保存。

4)、事件处理模型不同，Html标注和Html服务器控件的事件处理都是在客户端的页面上，而Asp.net服务器控件则是在服务器上，举例来说：

asp:Button ID="Button2" runat="server" Text="Button" /是Asp.net服务器控件，并且我们没有为其定义click，但是我们点击时，页面也会发回到服务器端。

由此可见：Html标注和Html服务器控件的事件是由页面来触发的，而Asp.net服务器控件则是由页面把Form发回到服务器端，由服务器来处理。

4、下面我就结合我自己的测试来说明问题：

这段代码是我放在repeat中的模板里的:其中DeleteCheck是一个js脚本函数，注意是用于是否发送到服务器端的，这里就不展示脚本代码了。

input runat="server" type="button" id="delete" value="Server button" /

input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" /

input runat="server" type="submit" onclick="return DeleteCheck(this)" id="Button2" value="Server submit" /

input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" /

button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button"Button-Button/button

asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" /

展现出来的html代码如下：

input name="Data$ctl03$delete" type="button" id="Data_ctl03_delete" value="Server button" /

input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" /

input name="Data$ctl03$Button2" type="submit" id="Data_ctl03_Button2" onclick="return DeleteCheck(this)" value="Server submit" /

input ut type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" /

button id="Data_ctl03_button4" onclick="return DeleteCheck(this)" value="Button-Button"Button-Button/button

input type="submit" name="Data$ctl03$button5" value="Asp:button" onclick="return DeleteCheck(this);" id="Data_ctl03_button5" /

可以看出以下几点:

1、当控件属性中有runat="server"时，生成的html控件时name和id发生的变化(.net Framework)。

2、当asp:button服务器按钮通过生成的页面后转化成类型为submit类型的Client控件。

3、当控件是html控件时通过生成的页面和原来的html代码完全一样(理由上面已经说名)。

另外我还测试了把这段代码直接放到form标记中(不放到其他子标记中)

如: input runat="server" type="button" id="delete" value="Server button" onserverclick="delete_ServerClick" /

input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" /

input runat="server" type="submit" onclick="return DeleteCheck(this)" id="Button2" value="Server submit" /

input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" /

button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button"Button-Button/button

asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" OnClick="button5_Click" /

asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click"LinkButton/asp:LinkButton直接放到form标记中生成的html代码

script type="text/javascript"

!--

var theForm = document.forms['form1'];

if (!theForm) {

theForm = document.form1;

}

function __doPostBack(eventTarget, eventArgument) {

if (!theForm.onsubmit (theForm.onsubmit() != false)) {

theForm.__EVENTTARGET.value = eventTarget;

theForm.__EVENTARGUMENT.value = eventArgument;

theForm.submit();

}

// --

/script

input language="javascript" onclick="__doPostBack('delete','')" name="delete" type="button" id="delete" value="Server button" /

input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" /

input name="Button2" type="submit" id="Button2" onclick="return DeleteCheck(this)" value="Server submit" /

input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" /

button id="button4" onclick="return DeleteCheck(this)" value="Button-Button"Button-Button/button

input type="submit" name="button5" value="Asp:button" onclick="return DeleteCheck(this);" id="button5" /

a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')"LinkButton/a

这里有可以看出几点：

变成 input runat="server" type="button" id="delete" value="Server button" onclick="return DeleteCheck(this)" onserverclick="delete_ServerClick" /

那样生成的html代码变成 input language="javascript" onclick="return DeleteCheck(this) __doPostBack('delete','')" name="delete" type="button" id="delete" value="Server button" /提示有脚本错误原因是onclick事件执行了2个脚本且书写的格式不正确。onclick="return DeleteCheck(this)；_doPostBack()"这样的话就只能执行第一个函数而第二个函数就不能执行了(return).如果用onclick="return DeleteCheck(this)，_doPostback()"是指2个函数同时都要执行没有影响(相当于一条语句)。

2、asp:button中的onclientclick事件生成后就变成了onclick事件了,类型变成了type="submit".然而服务器事件的onclick我想是通过发送到服务器端执行的。

3、LinkButton不定义onclick事件，它会自动的生成下面代码发送到服务器端。 href="javascript:__doPostBack('LinkButton1',' ')"

4、asp:button中的onclientclick事件生成后就变成了onclick事件了,类型变成了type="submit".然而服务器事件的onclick我想是通过发送到服务器端执行的。

1、网页中按钮的常见类型有哪些？ 2、网页中按钮的特点有哪些？ 3、按钮的设计要点有哪些？

一、网页中按钮的常见类型：

1、静态图片按钮

将按钮制作为静态图片的效果，不带有任何的交互效果和动态效果与普通文字链接相比静态图片链接，更加醒目和美观，视觉效果更出众，能够更加吸引浏览者。

2、Flash动画按钮

网页中的Flash可谓风靡一时，行业中常常出现Flash按钮效果。在潮流的驱使下，设计师也意识到了Flash所能达到的页面效果远远大于普通按钮。特别是游戏类网站更是将Flash发挥的淋漓尽致。

3、JavaScript翻转图片按钮

JavaScript翻转图片按钮通常是通过Java语言来实现的，即按钮在正常状态下是一幅图片，当鼠标经过时会变成另一幅图片。

4、汉堡按钮

汉堡菜单释放空间使界面更简约和通风，从功能的角度来看，它为其他重要的布局元素节省了大量空间。对于响应和自适应设计隐藏导航元素并使界面在不同设备上看起来更加和谐。

二、网页中按钮的特点：

1、易用性

在网页中使用图片按钮笔特殊字体的按钮，更容易被浏览者所识别。随着Flash动画的风靡，越来越多的网站使用了Flash动画按钮，这种按钮更能吸引浏览者注意时，网页更易于操作。现在的网页中开始越来越多的应用设计精美的图片按钮和Flash按钮。

2、可操作性

在网页设计过程中，为了使网页中较为重要的功能和链接突出出来，通常会将其制做成按钮的形式，如登录和搜索按钮等，或是一些具有特殊功能的按钮，这些按钮，无论是静态还是动态都是为了实现功能，而不是装饰，所以这些按钮，就需要有一定的可操作性。

三、按钮的设计要点：

1、与页面风格协调

因为中的任何一部分都不能脱离出来单独存在按钮也如此。按钮的风格必须与整体页面效果协调一致，才能体现出价值。

2、注意配色

手机按钮时要尽量做到文字清晰。另外配色应该简洁鲜艳，最好不要使用四种以上的颜色。

3、巧妙调整按钮的形状

按钮的形状应该根据整体页面颜色的着重点分布灵活调整。

扩展资料：

按钮设计原则：

1、颜色

为了使一些按钮容易引人注意并且一些次要按钮，选择合适的颜色至关重要。问题在于人类的情绪和行为与视觉环境高度相关，而颜色是这方面最强大的工具之一。在为CTA选择颜色时要记住这一点至关重要：按钮和背景颜色必须对比良好才能使按钮从其他UI组件中快速脱颖而出。

2、形状

至于CTA按钮，它们通常看起来像水平矩形。原因是你要清楚这个按钮是可点击和交互的，人们习惯将这个形状看作一个按钮。按钮的形状还要与网页或者app的设计风格保持一致。

3、位置

按钮的放置位置对于构建可靠的视觉层次结构和清晰的导航至关重要。如果它们位于用户眼睛无法捕捉到的区域，则其他视觉方面（例如颜色和大小）可能无法有效工作。设计人员必须学习可扫描的区域，并在用户可以操作的空间中放置核心功能的按钮。

网站按钮制作（制作网站质感按钮）

如何制作好看的网页按钮

使用混合模式和遮罩效果制作网页按钮打开photoshop，新建空白文档。为了不让白色背景看起来乏味，增加一个渐变叠加效果。渐变颜色为# f3f3f3到# c6c6c6。选择圆角矩形工具，创建按钮的的主要形状，半径为5 px。添加渐变叠加图层样式。渐变颜色从#0d3079到#557bc9。现在让按钮从背景中突显出来，添加1 px描边，颜色为深蓝色(#0b2258)。为了增加按钮立体感，添加一个1像素内发光。颜色为白色(#FFFFFF) ，减少不透明度到30%。现在给按键添加杂色，新建图层，按ctrl+图层蒙版缩略图，选择油漆桶工具，填充颜色为黑色(#000000) 。按ctrl+d取消选区。选择滤镜-杂色-添加杂色，数量为33%。设置图层混合模式为滤色，不透明度为15%。新建图层，按ctrl+图层蒙版缩略图，选择油漆桶工具，填充颜色为白色(#FFFFFF) 。按ctrl+d取消选区。现在开始创建漂亮的灯光效果，选择矩形工具，选中按钮的一半。按delete键删除选区，设置图层的不透明度不10%。添加文字，字体为Arial（Bold,14pt）。现在给文字添加雕刻效果，最简单的方式是复制文字层(ctrl + J) ，然后移动复制到原文字图层下方。添加一个深色的叠加颜色。右键点击混合选项混合叠加颜色#124d89 。分别向上，向左移动1px。选择自定义形状工具，画的放大镜，应用上一步骤方法，制作雕刻效果。设置按钮高光效果。新建一组，命名为“ light effect ”，设置混合模式为颜色减淡。按ctrl+图层蒙版缩略图。选择画笔工具，大小80px ，给按钮添加高光。