<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>个比较好看的Button的CSS-chinaz.com</title>
</head>
<body>
<style>
.btn {
BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid
}
.btn1_mouseout {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn1_mouseover {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
.btn3_mouseout {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mouseover {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mousedown
{
BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid
}
.btn3_mouseup {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn_2k3 {
BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid
}
</style>
<body>
<button class=btn title="CSS样式按钮\">CSS样式按钮</button><P></p>
<button
class=btn1_mouseout ōnmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'"
title="CSS样式按钮">CSS样式按钮</button>
<button
class=btn1_mouseout ōnmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'" DISABLED>CSS样式按钮</button>
<P>
<button class=btn2 title="CSS样式按钮">CSS样式按钮</button>
<P>
<button class=btn3_mouseout ōnmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
ōnmouseup="this.className='btn3_mouseup'"
title="CSS样式按钮">CSS样式按钮</button>
<P>
<button class=btn_2k3 title="CSS样式按钮">CSS样式按钮</button></body>
</html>
分享到：
相关推荐
本主题聚焦于一个特别吸引人的设计元素——CSS按钮，这些按钮的设计风格独特，能为网页增添视觉吸引力，提升用户体验。以下是基于“12个超赞的CSS按钮，绝对的震撼”这一主题所涵盖的知识点： 1. CSS3新特性：这些...
本资源"50个漂亮的css按钮"提供了一组美观的CSS样式，旨在帮助开发者创建吸引人的、交互性强的网页按钮。这些按钮设计各具特色，涵盖了多种风格和用途，可以满足不同网页设计的需求。 1. **CSS按钮的基本结构** ...
"好看的CSS按钮(兼容IE6)"这个主题聚焦于创建既美观又能在老旧浏览器，如Internet Explorer 6（简称IE6），中正常显示的CSS按钮。IE6尽管已经过时，但在某些环境下可能仍需支持。下面我们将深入探讨如何利用CSS实现...
"10个好看的css按钮源码.rar"是一个压缩包文件，包含了10个不同设计风格的CSS按钮源代码，旨在为开发者提供灵感和实用的代码示例，以便在自己的项目中创建美观且功能完备的按钮。 这些源码可能涵盖以下知识点： 1....
在提供的"css按钮样式.html"文件中，我们可以预览并分析这个好看CSS按钮样式的具体实现，包括所用的CSS选择器、属性和值。通过学习和理解这个示例，开发者可以将其作为模板，根据项目需求进行修改和扩展，创建更多...
从给定的文件信息来看，文章主要探讨了CSS在设计美观且易于修改的按钮方面的应用。下面将详细解析其中涉及的CSS知识点。 ### CSS样式定义 #### .btn 这是一个基本的按钮样式，定义了边框颜色、填充、字体大小、...
CSS实现的几个非常好看的按钮! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
【标题】"近100款漂亮CSS3/HTML5按钮合集.rar"涉及的知识点主要集中在CSS3和HTML5的交互设计上，尤其是利用这两种技术实现的各种样式丰富的按钮效果。CSS3是CSS（层叠样式表）的第三个版本，引入了大量新的选择器、...
之前我介绍过几款漂亮的CSS3开关切换按钮，比如这款CSS3渲染Checkbox实现3D开关切换按钮就利用了CSS3和checkbox实现了开关切换按钮。今天介绍的这款HTML5/CSS3开关切换按钮是利用纯CSS3的，代码非常简单，3D效果也还...
在网页设计中，按钮（Button）的样式是一个重要的组成...总的来说，好看的button样式CSS是一个涉及多种CSS技巧和策略的综合应用，通过灵活运用这些知识，设计师可以创造出既美观又实用的网页按钮，提升网站的整体品质。
本文将深入探讨如何利用CSS3创建风格清新、漂亮的开关按钮样式，包括3D效果和扁平化设计。我们将通过分析提供的`index2.html`和`index.html`文件以及相关的CSS样式来学习这一主题。 首先，让我们了解CSS3中的伪类和...
本资源“很立体的CSS按钮菜单效果.rar”提供了一种创新且立体的CSS实现方式，旨在提升网站或应用的视觉吸引力和功能性。以下是对这个资源中的知识点进行的详细解释： 1. CSS（层叠样式表）：CSS是一种用于描述HTML...
之前我分享过一些时尚的CSS3动画按钮，比如CSS3渲染Checkbox实现3D开关切换按钮、纯CSS3 3D按钮 按钮酷似牛奶般剔透等等。今天就再来分享一款可爱的CSS3按钮组合，该CSS3按钮一共有5种不同的风格，有几款还有3D立体...
"好看的网页按钮，CSS圆角按钮"这个主题关注的就是如何利用CSS技术来创建既美观又吸引人的按钮。CSS，即层叠样式表（Cascading Style Sheets），是用于控制网页元素样式的一种语言，它赋予了网页设计师极大的灵活性...
漂亮的CSS按钮样式单，只需要通过简单的CSS样式单，就可以实现各种样式的按钮，使用简单、方便。
代码片段： var animateButton = function(e) { e.preventDefault; //reset animation e.target.classList.remove('animate'); e.target.classList.add('animate'); setTimeout(function(){ ...
**CSS3 漂亮按钮详解** 在网页设计中，按钮是用户交互的重要元素，而CSS3的引入为创建美观且功能丰富的按钮提供了无限可能。本篇将深入探讨如何利用CSS3特性，如渐变、阴影、边框、伪类等，设计出各种吸引眼球的...
本文将深入探讨如何使用CSS实现自适应宽度的圆角背景按钮。这种技术允许按钮根据其内容自动调整宽度，同时保持其设计的一致性和美观性。 首先，我们需要理解CSS中的圆角属性`border-radius`。这个属性用于给元素的...
本篇文章将深入探讨“CSS button例子”这个主题，通过分析提供的文件“32、分享50个CSS超炫丽button样式代码下载”，我们将探索多种CSS技术来创建吸引人的按钮。 1. **基础样式**：CSS的基础按钮样式通常涉及`...
"多种好看的CSS3鼠标悬停动画按钮集合"是一个资源包，包含了多种独特设计的按钮样式，旨在提升用户体验，使网页更加生动和互动。下面将详细探讨这些知识点： 1. CSS3基础： CSS3是层叠样式表的最新版本，它引入了...