1.基于a元素，使用css制作图片按钮
a { display: block; height: 34px; width: 107px; line-height: 2; text-align: center; background: url(/upload/2010-08/14/014304_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; }
a:hover { background: url(/upload/2010-08/14/014304_btn_bg_hover.gif) no-repeat 0px 0px;}
要点：要把a块状化
有时超链接内容太长时要强制不被拆开换行，使用 a {word-break:keep-all;white-space:nowrap;}，但如果宽度比容器的一行还要宽怎么办？还是允许它拆分换行？
2. 滑动门技术，自适应宽度按钮
指按钮的宽度可以随着内容的多少而改变，这个在导航菜单上的应该尤为广泛。
主要技术是在a中嵌入辅助标签span，两者都使用同样的背景图片，a中背景图片右对齐，span中背景图片左对齐，文字在span中，当文字多时会把span撑开，两张背景图片重叠后形成一张像自适应宽度的图片。
图片的宽度要大于应用的最大宽度，这样就使每个背景图片都不会显示全，即被切掉了左边或右边一部分，最后两张背景图片组成了一张完整的，可滑动式的背景图片。
<style>
#nav ul { list-style:none; margin: 0px; padding: 0px; height:31px; background:url(/upload/2010-07/05/13.gif) 0 bottom repeat-x; overflow:hidden;}
#nav li { float: left; margin-left: 5px; }
#nav a { display: block; float:left; height: 28px; line-height: 28px; text-align:center; color: #da4901; font-weight:bold; background:url(/upload/2010-07/05/13.gif) right -28px no-repeat; padding-right:18px; text-decoration: none; }
#nav a span { display:block; background:url(/upload/2010-07/05/13.gif) left -28px no-repeat; padding-left:18px;}
#nav a:hover { background:url(/upload/2010-07/05/13.gif) right 0 no-repeat; color:#fff;}
#nav a:hover span { background:url(/upload/2010-07/05/13.gif) left top no-repeat;}
</style>
<body>
<div id="nav">
<ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>新首页</span></a></li>
<li><a href="#"><span>视频教程</span></a></li>
<li><a href="#"><span>网页版式布局</span></a></li>
</ul>
</div>
</body>
3.用图片美化按钮
采用按钮比超链接有一个好处是当css样式表没有加载上时，将会显示为默认按钮样式，这样用户可以清楚地知道这是个按钮，正常加载后，会使按钮更加美观。
例如：
.btn02 { background:#fff url(btn_bg2.gif) 0 0; height:22px; width:55px; color:#297405; border:1px solid #90be4a; font-size:12px; font-weight:bold; line-height:180%; cursor:pointer;}
.btn04 { background:url(btn_bg2.gif) 0 -24px; width:70px; height:22px; color:#9a4501; border:1px solid #dbb119; font-size:12px; line-height:160%; cursor:pointer;}
.btn07 { background:url(submit_bg.gif) 0px -8px; border:1px solid #cfab25; height:32px; font-weight:bold; padding-top:2px; cursor:pointer; font-size:14px; color:#660000;}
.btn08 { background:url(submit_bg.gif) 0px -64px; border:1px solid #8b9c56; height:32px; font-weight:bold; padding-top:2px; cursor:pointer; font-size:14px; color:#360;}
.btn09 { background:url(http://www.aa25.cn/upload/2010-08/14/014304_btn_bg.gif) 0 0 no-repeat; width:107px; height:37px; border:none; font-size:14px; font-weight:bold; color:#d84700; cursor:pointer;}
4.修改链接的下划线
设置text-decoration:none去除链接的下划线。然后再给链接加下边框线，设置下边框线不同的宽度、线型、颜色，就可以实现“下划线”变成多样效果
分享到：
相关推荐
当我们谈论“CSS3实现鼠标悬停链接按钮代码”时，我们指的是利用CSS3的特性来设计一个按钮，在鼠标悬停时能呈现出特定的动画效果。这通常包括颜色变化、形状变形、过渡效果等，以增加用户与网页的互动性。 这个...
【标题】中的“14、Jquery实现鼠标悬停链接按钮代码”指的是一个关于使用jQuery库来处理HTML中链接按钮（通常为`<a>`标签）的悬停事件的教程或示例。这个主题主要涉及JavaScript的jQuery库，用于增强网页的交互性。 ...
"修改IE链接按钮"这个主题涉及到的是如何个性化Internet Explorer（IE）浏览器的界面，尤其是链接按钮的行为和外观。这通常需要深入理解浏览器的工作原理、HTML、CSS以及JavaScript等前端技术。 首先，我们要知道，...
在前端开发中，实现"JS点击复制剪贴板鼠标点击文字弹出复制链接按钮"的功能是一种常见的需求，尤其是在网页交互和用户体验优化上。这一功能可以让用户更方便地获取和分享页面上的链接，提升网站的易用性。下面将详细...
【jQuery全屏3D鼠标经过显示详细链接按钮特效】是一种常用的网页交互设计，它结合了JavaScript库jQuery和CSS3技术，为用户提供了一种引人注目的视觉体验。这个特效主要应用于全屏广告或者产品展示，当用户将鼠标悬停...
该资源是一个基于jQuery库实现的全屏3D特效，当鼠标经过时会显示详细链接按钮。这个效果在网页设计中常用于吸引用户注意力并提供更多信息交互。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理...
总的来说，这个压缩包提供了一个使用JavaScript实现文字链接按钮样式的实例，对于学习和理解JavaScript与HTML的交互有很好的参考价值。通过分析和实践这个示例，开发者可以更好地掌握JavaScript在网页动态效果方面的...
在JavaScript（JS）中，实现点击文字后弹出复制链接按钮的功能涉及到多个技术点，包括事件监听、DOM操作以及浏览器的剪贴板API。以下是对这些知识点的详细讲解： 1. **事件监听**： 在JavaScript中，我们可以使用`...
js 特效 html 特效 链接确认按钮 js 特效 html 特效 链接确认按钮
在Windows编程或者GUI编程中，按钮是用户界面中不可或缺的元素，它允许用户与应用程序进行交互。本主题将深入探讨按钮的三种基本状态：普通、聚焦和按下，并以一种简单的方式来实现这些状态的变化，主要利用定时器和...
此外，如果要创建一个简单的链接按钮，可以为 `<a>` 标签添加一个 `plain="true"` 属性，它将创建一个没有边框和背景色的简单链接按钮： ```html ;background:#fafafa;width:500px;border:1px solid #ccc"> ...
使用链接按钮和深层链接在服务和Slack之间实现无缝流动 松弛的应用程序使团队可以快速完成任务以及完成其他工作，而无需上下文切换到另一个产品或浏览器窗口。 但是，并非服务的每个部分都需要引入Slack。 花费几...
本话题主要聚焦于如何利用XSLT创建页面链接按钮，以便将大型XML数据分页展示在网页上。这在处理大量数据时尤为重要，因为它提高了用户界面的可导航性和性能。 首先，我们需要理解XSLT的基本结构。XSLT是基于XSL...
5. **命令链接按钮**：在Windows XP及更高版本中，命令链接是一种特殊的按钮，它具有指示符文本，可以引导用户执行特定任务。在MFC中，可以通过CCommandLink类来实现这种按钮。 6. **三态按钮**：MFC中的CButton类...
为了防止这种情况，我们可以使用JavaScript来控制ASP.NET中的链接按钮，以确保每个按钮点击只触发一次回发。 ASP.NET的链接按钮（LinkButton）控件是一个HTML的a标签，通过AJAX或服务器端代码模拟提交行为。在默认...
例如，它们可以作为页面跳转的链接按钮，或者在多媒体项目中作为播放、暂停、停止等操作的控制元素。对于初学者来说，这些预设的按钮能够节省大量的设计时间，让他们更专注于交互逻辑和用户体验的优化。 在"1351个...
在这个例子中，`event.preventDefault()`方法阻止了按钮的默认提交行为，而`window.location.href`则用于改变当前窗口的URL，实现了点击按钮跳转到指定页面的效果。 总之，HTML的`<button>`和`<a>`标签结合使用，...
在实际应用中，我们可以将这些按钮用在网页表单的提交按钮、导航菜单的链接按钮、页面的返回和前进按钮等。对于前端开发者而言，可以通过CSS3来实现更多的动态效果，如过渡、动画和伪类选择器，使这些按钮在用户交互...