我们用 A 包含一个 SPAN 标签来实现此效果:
预览
<a class="button" href="#"><span>按钮文字</span></a>
<style type="text/css">
a.button {
background:url("bg_button_a.gif") no-repeat scroll right top transparent;
color:#444444;
display:block;
float:left;
font:12px arial,sans-serif;
height:24px;
margin-right:6px;
padding-right:18px;
text-decoration:none;
}
a.button span {
background:url("bg_button_div.gif") no-repeat scroll 0 0 transparent;
display:block;
line-height:14px;
padding:5px 0 5px 18px;
}
a.button:active {
background-position:right bottom;
color:#000000;
outline:medium none;
}
a.button:active span {
background-position:left bottom;
padding:6px 0 4px 18px;
}
</style>
由于 IE 下点击后不能还原到默认状态,因此,我们需要在标签里添加一段代码:
<a class="button" href="#" onclick="this.blur(); return false;"><span>按钮文字</span></a>
如果你需要用它提交表单(FORM),那么可以在 onclick 里面添加一个提交语句,如:document.forms['theForm'].submit();
分享到:
相关推荐
"好看的网页按钮,CSS圆角按钮"这个主题关注的就是如何利用CSS技术来创建既美观又吸引人的按钮。CSS,即层叠样式表(Cascading Style Sheets),是用于控制网页元素样式的一种语言,它赋予了网页设计师极大的灵活性...
【标题】"CSS3漂亮的圆角自适应长度按钮特效"主要展示了如何利用CSS3的特性来创建美观且具有自适应宽度功能的按钮。在网页设计中,按钮是用户交互的重要元素,而圆角按钮因其柔和的视觉效果和现代感,常常被广泛应用...
在网页设计中,按钮是必不可少的交互元素,用于引导用户执行特定操作。随着技术的发展,CSS3为按钮设计带来了...在给定的压缩包文件中,你将找到具体的CSS3样式代码示例,可以参考它们来实践和扩展自己的按钮设计技能。
总结来说,CSS圆角组件是CSS3中的一个重要特性,它极大地扩展了网页设计的可能性,让设计师能够轻松地创建出美观、现代的用户界面。通过熟练掌握`border-radius`及相关属性的使用,我们可以构建出更具吸引力和舒适性...
通过调整阴影的水平偏移、垂直偏移、模糊半径和扩展半径,可以在鼠标悬停或点击时改变阴影,进一步强化按钮的按下效果。 3. **Pseudo-Classes(伪类)**:CSS3引入了若干伪类选择器,如`:hover`、`:active`和`:...
通过事件接口,开发者可以扩展或定制按钮的行为,例如,添加自定义的回调函数,或者改变按钮的默认行为。 总的来说,“CSS3样式的按钮切换选择类”提供了一个高效且灵活的方式来创建具有动态效果和交互性的按钮组。...
总之,CSS3气泡按钮特效是一种创新且实用的设计技巧,结合了圆角、阴影、过渡、变换和渐变等多种CSS3特性,为网页元素带来了更丰富的视觉表现力和互动性。通过深入理解和实践,设计师和开发者能够创造出更多独具特色...
4. **边框半径**:`border-radius`属性允许我们创建圆角按钮,这是CSS3的一大亮点。通过设置不同的半径值,可以创建从微小的圆角到完全圆形的按钮。 5. **文本效果**:除了按钮的背景和边框,CSS3还可以对按钮内的...
CSS圆角是网页设计中常见的一种视觉效果,它使得网页元素(如按钮、卡片或容器)的边角看起来更加平滑,提升用户界面的美观度。在早期的CSS版本中,实现圆角效果较为复杂,需要使用图片或者多个CSS边框来模拟。随着...
而CSS Bootstrap4按钮样式扩展库特效则是在基础的Bootstrap4按钮样式上进行了增强和扩展,提供了更多的视觉效果和交互体验。 在Bootstrap4中,按钮的基本样式包括默认(Default)、主要(Primary)、次级...
然而,为了提高代码的可维护性和可扩展性,通常会推荐使用CSS预处理器(如Sass或Less)和模块化方法(如BEM命名法)来组织CSS代码。 在实际项目中,你可能还需要考虑按钮的状态,如禁用状态、加载状态,以及与其他...
在本资源"超可爱的纯CSS3滑动开关按钮.zip"中,提供了一些简单且美观的CSS3实现的滑动开关按钮。下面我们将详细探讨CSS3滑动开关的设计原理和相关知识点。 1. CSS3基础: - `box-sizing`: 这个属性定义了元素的...
"36种漂亮的CSS3网页按钮Button样式"集合展示了如何利用CSS3的各种属性和技巧来设计各种各样的按钮,让网页界面更加吸引人。 首先,我们来看看CSS3中的一些核心属性,它们在设计按钮时发挥着重要作用: 1. **边框...
2. **内阴影(Box Shadow)**:使用CSS的`box-shadow`属性来创建按钮的阴影效果,这可以模拟按钮的立体感。 ```css .shadow-button { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 水平偏移、垂直偏移、模糊半径...
2. **粗边框按钮**: 使用`border-width`属性设置较粗的边框,配合`border-radius`创建圆角,再用`background-color`设置背景,就可以实现这种效果。还可以通过`transition`属性实现鼠标悬停时边框颜色的变化,增加...
6. **自定义设计**:CSS允许高度定制,你可以根据项目需求调整按钮的形状、阴影、圆角等。例如,通过修改`border-radius`属性来设置圆角,或者使用`box-shadow`来创建深度感。 通过以上步骤,我们可以创建一个基本...
- `css`:这个文件夹包含了分页样式,使用CSS来定义按钮的布局、颜色、圆角等视觉属性。可能有一个或多个CSS文件,比如一个全局样式表和一个专门针对分页的样式表。 在实现过程中,开发者需要注意以下几点: - ...
1. **边框与圆角**:CSS3允许我们创建带有圆角的按钮,通过`border-radius`属性设置圆角半径,可以实现气泡形状的圆润边缘。例如,`border-radius: 5px;` 创建了一个5像素的圆角。 2. **阴影效果**:`box-shadow`...
12. CSS预处理器:Sass、Less等CSS预处理器可以让CSS代码更易于维护和扩展,通过变量、嵌套规则和混合等功能,创建可复用的按钮样式。 这些CSS按钮样式代码不仅提供了视觉上的灵感,还可以作为学习和实践CSS技巧的...
总结来说,“CSS3幽灵按钮样本”涵盖了CSS3中的多个重要知识点,包括伪类选择器、渐变、阴影、圆角、动画以及布局模型。这些技术的结合使用,让按钮设计不仅仅是功能性的,更成为提升用户体验和网页视觉效果的重要...