65.9K
CodeProject 正在变化。 阅读更多。
Home

表单改头换面；第二部分：按钮 - 作者：Jay@Thakar.info

Jay Thakar
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.84/5 (11投票s)

2009 年 9 月 25 日

CPOL

7分钟阅读

viewsIcon

30583

downloadIcon

200

各种制作精美按钮的方法。

引言

这是“表单改头换面”系列文章的第二篇，其中介绍了使 Web 表单美观、易于实现和易于使用的各种选项。在我之前的文章 《表单改头换面；第一部分：文本框 - 作者：Jay@Thakar.info》 中，我们了解了各种使文本框美观的选项。在本文中，我们将探讨另一个元素——“按钮”。

背景

如您所知，Web 表单中的按钮代表某个操作。在许多情况下，Web 表单的设计非常糟糕，操作项（如按钮）根本不显眼。在本文中，我们将了解如何最大程度地减少/消除一些常见错误，让您（是的，开发者）和应用程序用户的生活更轻松。本文介绍了使按钮美观（且非常显眼）的各种方法。

Button

您可能会同意，任何 Web 表单的目的是收集信息并将其发送到服务器。没有按钮，就很难将信息发送到服务器，因为按钮代表表单上的操作项。可以通过按钮做很多事情，使其更有趣并对最终用户有帮助，同时又易于实现。最终，用户只有在按钮可见时（对应用程序用户而言）才会点击它。

在本文中，我们将使用一个简单的注册表单，其中包含两个按钮：“注册”和“清除”。

/*Code: 1. SimpleForm.htm*/
<input id="register" type="submit" value="Register" />
<input id="clear" type="reset" value="Clear" />
Simple Form
没有任何 CSS 的简单表单

现在，让我们开始对这个表单进行改头换面。

CSS 的魔力

更改按钮（或任何元素）外观最简单有效的方法之一是使用 CSS。您可以使用 CSS 的一些技巧来使按钮更美观。让我们来看一些……

/*Code: 2.CSS_Font.htm*/
<style>
...
...
.loginButton
{
    color: #B24F04;
    font-family: "Verdana" ,sans-serif;
}
</style>
</head>
...
...
<input id="register" type="submit" value="Register" 
    class="loginbutton" />
<input id="clear" type="reset" value="Clear" 
    class="loginButton" />
Added some fonts
带字体的表单

通过应用字体并更改颜色，这些按钮看起来比早期版本略有改进。另一个令人兴奋的事情是使用 Web 字体。

/*Code: 3.Web_Font.htm*/
<style type="text/css">
@font-face
 {
    font-family: Gentium;
        src: url(http://www.princexml.com/fonts/larabie/berylibi.ttf) 
        format("truetype" );
}

.loginButton
{
    color: #B24F04;
    font-family: "Gentium" , serif;
}
</style>
...
...
<input id="register" type="submit" value="Register" class="loginButton" />
<input id="clear" type="reset" value="Clear" class="loginButton" />
Web fonts on Firefox
在 Mozilla Firefox 上渲染的 Web 字体		Web fonts on IE
IE 上的 Web 字体

如您在此处所见，我们使用的是托管在服务器上的字体，因此不需要在客户端计算机上安装指定的字体。如果浏览器不支持“Web 字体”，则会使用替代字体（本例中为 sans-serif）。这是一件很“酷”的事情，特别是当您想使用一些花哨的字体，并且您确定在客户端计算机上无法获得这些字体时。这是不同浏览器从上述代码中得到的结果。

注意：请非常小心使用此技术，因为这项技术仍处于早期阶段，支持它的浏览器非常少。我能够通过 IE 8 和 Firefox 3.5 进行检查。

现在，让我们为这些按钮添加一些边框……

/*Code: 4.Border.htm*/
<style type="text/css">
...
...
.loginButton
{
    color: #B24F04;
    font-family: "verdana" ,sans-serif;
    border: solid thin #F58F1A;
}
</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<input id="register" type="submit" value="Register" class="loginButton" />
<input id="clear" type="reset" value="Clear" class="loginButton" />
</div>
Simple Borders
带边框的按钮

这里，我们通过添加实线边框将按钮的外观更改为扁平化。您可以在此处尝试各种边框类型和各种边来实现不同的效果。这是另一个使用边框的示例。

/*Code: 5.Border_ThickLeft.htm*/
<style type="text/css">
...
...
.loginButton
{
	color: #B24F04;
	font-family: "Verdana" ,sans-serif;
	border: solid 1px #F58F1A;
	border-left: 5px solid #F58F1A;
	border-right: 5px solid #F58F1A;
}
</style>

<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<input id="register" type="submit" value="Register" class="loginButton" />
<input id="clear" type="reset" value="Clear" class="loginButton" />
</div>
Border with thick left border

 在上述 2 个示例中，我们添加了边框。在第二个示例中，我们在按钮的所有边上应用了细（1px）边框，并在按钮的左侧和右侧添加了粗（5px）边框。这提供了良好的视觉效果，与常规按钮略有不同。您还可以尝试许多其他边框样式，例如 outset、double、groove 等。

基于状态的不同视觉效果

在大多数情况下，我们希望禁用按钮的外观有所不同。通常有两种方法可以应用不同的视觉样式来表示禁用的按钮。

/*Code: 6.Disabled_Different.htm*/
<style type="text/css">
...
...
.loginButton
{
    color: #B24F04;
    font-family: "Verdana" ,sans-serif;
    border: solid 1px #F58F1A;
    border-left: 5px solid #F58F1A;
    border-right: 5px solid #F58F1A;
}
input[disabled]
{
    font-family: "Verdana" ,sans-serif;
    border: solid 1px gray;
    border-left: 5px solid gray;
    border-right: 5px solid gray ;
    color:gray;
    filter: dropshadow(color=#555555,offX=0,offY=1);
    filter:alpha(opacity=60); /* IE’s opacity*/
    opacity: 0.60;
 }
</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<input id="register" type="submit" value="Register" disabled="disabled" />
<input id="clear" type="reset" class="loginButton" value="Clear" /></div>
Disabled textbox
不同的禁用格式。

现在，让我们添加一些背景。这里有几种使用背景的方法。让我们从添加纯色背景开始……

/*Code: 7.Background_Solid.htm*/
<style type="text/css">
...
...
.loginButton
{
	color: black;
	font-family: "Verdana" ,sans-serif;
	border: solid 1px #F58F1A;
	border-left: 5px solid #F58F1A;
	border-right: 5px solid #F58F1A;
	background-color:#D4E6F7;
}
</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<input id="register" type="submit" class="loginButton" value="Register" />
<input id="clear" type="reset" class="loginButton" value="Clear" />
</div>
Solid color as background
带纯色背景的按钮。

您还可以使用图像作为背景。有两种最流行的视觉效果……

  1. 渐变效果
  2. 圆角

让我们看一个例子。

/*Code: 8.Background_Image.htm*/
<style type="text/css">
...
...
.loginButton
{
	color: black;
	font-family: "Verdana" ,sans-serif;
	border: solid 1px #F58F1A;
	background-image: url("gr.jpg");
}
</style>

<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<input id="register" type="submit" class="loginButton" value="Register" />
<input id="clear" type="reset" class="loginButton" value="Clear" />
</div>
Gradient Background
/*Code: 9.Background_RoundCorner.htm*/
<style type="text/css">
...
...
.loginButton
{
	background: transparent url(’RoundCornerBtn.png’) no-repeat scroll top right;
	color: white;
	height: 38px;
	border: none;
	width: 130px;
	margin: 0px;
}
</style>

<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<input id="register" type="submit" class="loginButton" value="Register" />
<input id="clear" type="reset" class="loginButton" value="Clear" />
</div>
Button with Rounded Corner
带圆角的按钮

注意：您可能已经看到我们使用了 width: 130px;，因为我们的图像宽度为 130 像素。这里使用的文本框具有透明背景，无论您使用什么图像作为背景，文本框都会显示该图像。此样式只能用于固定宽度的按钮。

用于圆角的滑动门技术

在看过上面的按钮后，一个问题浮现在脑海中：如果我想创建具有动态宽度的按钮（即背景图像根据按钮的文本进行调整），该怎么办？在这种情况下，有几种技术可用；一些使用某种脚本（即 jQuery 或 JavaScript 等），一些使用 CSS 和 HTML 的组合。我们将研究一种涉及 HTML 和 CSS 的方法。

/*Code: 10.RoundCorner_slidedoor.htm*/
<style type="text/css">
...
...
button
{
	border: 0;
	text-align: center;
	padding: 0 12px 0 0;
}

button.submitBtn
{
	background: url(bg_button_right.png) right no-repeat;
}

button.submitBtn span
{
	height: 24px;
	line-height: 24px;
	background: url(bg_button_left.png) left no-repeat;
}

button span
{
	position: relative;
	display: block;
	white-space: nowrap;
	padding: 0 0 0 12px;
}
</style>

<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<button id="register" type="submit" class="submitBtn">
<span>Register</span></button>
<button id="clear" type="reset" class="submitBtn">
<span>Clear</span></button>

<button value="submit" class="submitBtn">
<span>Some very logn text</span></button>
</div>
Rounded corners with sliding door style.
带滑动门风格的圆角

这里我们使用了一些东西；首先，我们使用 button 标签而不是 input 标签，因为 button 标签允许其内部包含 span 标签，而 input 标签则不允许。这里 button 的 CSS 负责圆角的左侧，而 span 负责右侧。span 中的 position: relative; 将确保右侧在左侧之后显示。我们在左侧和右侧保留了 12 像素的内边距，这是因为左侧和右侧的图像有圆弧，我们不希望用户在此处输入。

带图标的按钮

为图像添加图标总是一个不错的选择，因为它增加了视觉一致性，并引起用户更多的关注；您可能已经知道，人类大脑处理图像的速度比文本快。让我们看看向按钮添加图片（图标）的各种方法。

/*11.Icon_CSS.htm*/
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<button id="register" type="submit" class="submitBtn">
<span><img src="ico_submit.gif" border="0" alt="" 
height="18px" style="vertical-align:middle" /> Register</span></button>
<button id="clear" type="reset" class="submitBtn">
<span><img src="view_refresh.png" border="0" 
    alt="" height="18px" style="vertical-align:middle" />
    Clear</span></button>
</div>
Button with Icon
带图标的按钮

在上面的代码中，我们在按钮中添加了一个 span，并在 span 中添加了图像。与 Input 不同，Button 标签允许我们添加内部 span，您可以在其中添加 Image。

行为

现在，让我们继续按钮定制的下一阶段，即行为。与第一部分一样，这里也有许多不同的选项用于定制和添加不同的行为。

悬停

/*Code: 12.Hover_CSS.htm*/
<style type="text/css">
...
...
button.submitBtn:hover
{
	background: url(bg_button_rightH.png) right no-repeat;
}

button.submitBtn:hover span
{
	background: url(bg_button_leftH.png) left no-repeat;
}

</style>
<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<button id="register" type="submit" class="submitBtn">
<span>Register</span></button>
<button id="clear" type="reset" class="submitBtn">
<span>Clear</span></button>
</div>
Highlight on Focus

这非常整洁，而且显然易于实现；而且我们不使用 JavaScript 或任何编程！:) CSS 伪类用于为某些选择器添加特殊效果。我们使用 hover 伪类为按钮添加鼠标悬停效果。可以使用 JavaScript 获得相同的结果。

/*Code: 13.HighlighJS_Hover.htm*/
<style type="text/css">
...
...
.loginButton
{
	color: black;
	font-family: "Verdana" ,sans-serif;
	border: solid 1px #F58F1A;
	background-image: url("gr.jpg");
}
	
.loginButton_Hover
{
	font-family: "Verdana" ,sans-serif;
	border: solid 1px #F58F1A;
	background-image: url("grHover.jpg");
}
</style>

<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<input id="register" type="submit" class="loginButton" 
	value="Register" onmouseout="this.className=’loginButton’;" 
	onmouseover="this.className=’loginButton_Hover’" />
<input id="clear" type="reset" class="loginButton" 
	value="Clear" onmouseout="this.className=’loginButton’;" 
	onmouseover="this.className=’loginButton_Hover’" />
</div>
Highlight on Focus with JavaScript

在上面的代码中，在 Input 的定义中，我们添加了 onmouseover 和 onmouseout 的 JavaScript 事件处理程序，在 onmouseover 中，我们将 CSS 类切换到 loginButton_Hover，在 onmouseout 中，我们切换回 loginButton。

提供操作反馈

根据一项关于页面加载时间和用户耐心度的研究得出结论，普通用户可以等待大约“4 秒”来加载页面。同样的事情也适用于页面上的任何操作，例如，如果用户点击按钮，他/她会期望某种反馈；您一定还记得 Windows 窗体中的旧时代，点击按钮时鼠标指针会变成等待（沙漏）指针。Web 应用程序开发人员有多种方法可以在用户操作后提供反馈。

显示消息

提供反馈的一种流行方法是显示消息/或动画图像，指示操作已启动。在以下示例中，我们显示了一条消息。

/*14.Feedback_Label.htm*/
<script language="javascript" type="text/javascript">
function displayMessage() {
	var divMessage = document.getElementById("div_Message");
	divMessage.style.display = ’’;
	// following line is to simulate wait in real code you
	// may not need to include that; 
	 setTimeout("window.location=’feedback_label.htm’;", 2000); 
	 return true;
}
</script>

<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9">
...
...
<input id="register" type="submit" class="loginButton" value="Register" 
	onmouseout="this.className=’loginButton’;"
	onmouseover="this.className=’loginButton_Hover’" 
	onclick="return displayMessage();" />
<input id="clear" type="reset" class="loginButton" value="Clear" 
	onmouseout="this.className=’loginButton’;"
	onmouseover="this.className=’loginButton_Hover’" />
<div id="div_Message" style="display: none;">
	Form Submitter, Please wait ...</div>
</div>
Button before clicking.Button after clicking; Displays message.
点击前的按钮。点击后的按钮；显示消息。

在上面的代码中，最初 div_Message 不可见；但在点击“注册”按钮的事件中，我们调用了 divMessage，它显示一条消息，表明您已点击按钮，您可能需要等待才能看到结果。

表单淡入效果

您可以使用另一种视觉效果，即在显示消息的同时淡入整个表单。这非常容易实现，而且非常有效，整个表单会改变其外观，这是一种比仅显示消息更具视觉效果的技术。

/*Code: 15.Feedback_dimmer.htm*/
<style type="text/css">
...
...
.opac
{
	opacity: 0.4;
	filter: alpha(opacity=40);
}
</style>

<script language="javascript" type="text/javascript">
function displayMessage() {
	var divM = document.getElementById("div_Message");
	divM.style.display = ’’;
	var dForm = document.getElementById("div_Form");
	dForm.className = "opac"; // apply dimmer effect on entire form
	setTimeout("window.location=’15.Feedback_dimmer.htm’;", 2000);
	return true;
}
</script>

<div style="border: solid thin #FF4A00; padding: 10px; background-color: #FDEDD9"
id="div_Form">
...
...
<input id="register" type="submit" class="loginButton" value="Register" 
	onmouseout="this.className=’loginButton’;"
	onmouseover="this.className=’loginButton_Hover’"
	onclick="return displayMessage();" />
<input id="clear" type="reset" class="loginButton" value="Clear" 
	onmouseout="this.className=’loginButton’;"
	onmouseover="this.className=’loginButton_Hover’" />
</div>

<div id="div_Message" style="display: none;">
Form Submitted, Please wait ...</div>
Form before button clicked.
按钮点击前的表单。		Form after button clicked.
按钮点击后的表单。

如您在上面的代码中所见，我们使用了 dForm.className = "opac"; 来为表单应用淡入效果。这是一种非常有效的视觉效果，可以告知用户表单处理已启动，用户需要等待；

防止意外（双击）

 然而，在上述 2 种方法中存在一个潜在问题；上述方法无法防止用户点击按钮两次；在某些情况下，我们需要防止用户点击两次（例如，在您下在线订单的网站上；如果用户不小心点击两次，可能会重复订购相同的商品；这不是一个好主意）；以下代码可防止双击。

/*Code: 16.NoDBLClick.htm*/
<style type="text/css">
...
...
.opac
{
	opacity: 0.4;
	filter: alpha(opacity=40);
}
</style>

<script language="javascript" type="text/javascript">
function displayMessage() {
	var divM = document.getElementById("div_Message");
	var bRegister = document.getElementById(’register’);
	var dForm = document.getElementById("div_Form");
	divM.style.display = ’’;
	dForm.className = "opac";
	bRegister.form.submit();
	bRegister.disabled = 1;
	setTimeout("window.location=’16.NoDBLClick.htm’;", 2000);
	return true;
}
</script>

...
...
<input id="register" type="submit" class="loginButton" 
	value="Register" 
	onmouseout="this.className=’loginButton’;"
	onmouseover="this.className=’loginButton_Hover’" 
	onclick="return displayMessage();" />
<input id="clear" type="reset" class="loginButton" 
	value="Clear" 
	onmouseout="this.className=’loginButton’;"
	onmouseover="this.className=’loginButton_Hover’" />
</div>

<div id="div_Message" style="display: none;">
	Form Submitted, Please wait ...</div>
Disabled button after click.
点击后禁用的按钮。

在上面的情况下，我们首先调用 bRegister.form.submit();，这将执行此表单中的 submit 方法，然后我们调用 bRegister.disabled = 1;，这将禁用“注册”按钮，从而防止用户再次点击它。

历史

首次提交于 2009 年 9 月 24 日。

摘要

下载源代码  下载源代码

作为开发者，如果您开始思考这个问题“我如何让最终用户的生活更轻松？”并实施更改，那么您将让自己的生活更轻松；最终，决定您的应用程序有多好的不是您；而是应用程序的用户。祝您编码愉快：)

如果您有任何问题，请随时与我联系：Jay@Thakar.info

© . All rights reserved.