`
tntxia
  • 浏览: 1510314 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

很漂亮的按钮样式

CSSMicrosoftHTML 
阅读更多 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>个比较好看的Button的CSS</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>

<p><button class=btn title="CSS样式按钮">CSS样式按钮</button><P></p>
<button class=btn1_mouseout onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn1_mouseout'" title="CSS样式按钮">CSS样式按钮</button>
<p><button
class=btn1_mouseout onmouseover="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 onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
  onmouseup="this.className='btn3_mouseup'"
  title="CSS样式按钮">CSS样式按钮</button>
<P>
<button class=btn_2k3 title="CSS样式按钮">CSS样式按钮</button></body>

</html>
 
2
顶
4
踩
分享到：
| ExtJS的组件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    c# winform glassbutton 很漂亮的按钮样式 玻璃按钮

    c# winform编程 玻璃按钮样式 非常漂亮的按钮样式库，直接打开可以使用，支持VB,大家下载吧。

    漂亮的WPF按钮样式，水晶效果

    "漂亮的WPF按钮样式，水晶效果"这个主题着重于如何利用WPF的样式和模板机制，为按钮控件创建出吸引人的、具有水晶质感的视觉效果。这种效果能够提升应用的整体视觉吸引力，增强用户对软件的第一印象。 WPF（Windows...

    c# winform 非常漂亮的按钮 玻璃按钮效果 按钮样式 风格 希望可以给大家提供帮助 源码

    总的来说，自定义C# WinForm的按钮样式是提高应用程序用户体验的有效途径，而玻璃按钮效果则是其中的一种流行设计。通过深入研究并应用这样的源码，开发者可以为自己的程序添加独特的视觉元素，使得用户界面更加...

    漂亮按钮样式.rar

    "漂亮按钮样式.rar"这个资源包，正如其名，提供了多种美观的按钮设计，适用于网页、应用程序或者其他交互式平台，旨在提升用户体验和视觉吸引力。这些按钮样式通常包含了不同颜色、形状、大小和效果，以满足设计师在...

    36种漂亮的网页Button按钮样式

    36种漂亮的网页Button按钮样式

    漂亮的C#WPF自定义按钮样式

    本教程将深入探讨如何利用C# WPF实现一个漂亮的自定义按钮样式。 首先，我们需要了解WPF中的样式（Style）和模板（Template）。样式用于定义控件的一系列视觉属性，如背景色、字体、边框等，而模板则更进一步，可以...

    ps 样式 多个漂亮按钮效果

    在"ps 样式 多个漂亮按钮效果"这个主题中，我们可以理解为这些".asl"文件内含了多种设计精美的按钮样式。例如，1002_4.asl、gj1104_3.asl、gj1028_3.asl、0923_3.asl、1015_4.asl和1013_3.asl，每个文件可能代表一组...

    风格清新漂亮的CSS3开关按钮样式

    本文将深入探讨如何利用CSS3创建风格清新、漂亮的开关按钮样式，包括3D效果和扁平化设计。我们将通过分析提供的`index2.html`和`index.html`文件以及相关的CSS样式来学习这一主题。 首先，让我们了解CSS3中的伪类和...

    vc 漂亮按钮样式 超炫的那种

    本文将深入探讨如何在Visual C++（简称VC）中创建美观且吸引人的按钮样式，以此来实现“vc 漂亮按钮样式 超炫的那种”。 首先，我们需要了解Windows API中的控件和消息机制。在VC++中，按钮通常是由WM_CREATE、WM_...

    下载QT漂亮QML模仿流行VUE Element UI之按钮，QML漂亮大方美观的按钮样式 QML开发按钮样式 Button漂亮样式下载QML下载 快速开发QML漂亮界面 QML自定义漂亮控件下载

    QT漂亮QML模仿流行VUE Element UI之按钮，QML漂亮大方美观的按钮样式 QML开发按钮样式 Button漂亮样式QML下载 快速开发QML漂亮界面 QML自定义漂亮控件 QT QML 模仿流行VUE Element UI之按钮，打造美观大方的按钮样式...

    漂亮简单的网页css按钮样式

    漂亮的CSS按钮样式单，只需要通过简单的CSS样式单，就可以实现各种样式的按钮，使用简单、方便。

    下载QT漂亮QML模仿流行VUE Element UI之按钮，下载QML漂亮大方美观的按钮样式 下载QML开发按钮样式 Button漂亮样式QML下载 快速开发QML漂亮界面 QML自定义漂亮控件

    QT漂亮QML模仿流行VUE Element UI之按钮，QML漂亮大方美观的按钮样式 QML开发按钮样式 Button漂亮样式QML下载 快速开发QML漂亮界面 QML自定义漂亮控件 QT QML 模仿流行VUE Element UI之按钮，打造美观大方的按钮样式...

    36个漂亮的按钮样式.rar

    36个漂亮的按钮样式.rar 绝对好 good

    photoshop 漂亮 绿色 按钮 样式

    "漂亮"的按钮样式通常指的是吸引人且与整体设计和谐统一的元素。这可能涉及到形状、质感、光影效果、边框、填充和字体等多方面的设计。在Photoshop中，设计师可以通过图层样式来实现这些效果。图层样式是Photoshop的...

    WPF炫酷旋转按钮样式

    **WPF炫酷旋转按钮样式**是Windows Presentation Foundation（WPF）中的一种创新设计，用于创建具有视觉吸引力的用户界面元素。WPF是.NET Framework的一部分，提供了丰富的图形和UI功能，使得开发人员能够构建出美观...

    漂亮的CSS3按钮样式集合源码免费下载

    本文将深入探讨“漂亮的CSS3按钮样式集合”这一主题，介绍如何利用CSS3特性创建出美观且功能强大的按钮，以及如何通过源码免费下载来学习和应用这些样式。 首先，CSS3的按钮样式主要依赖于以下几项关键技术： 1. *...

    css样式_漂亮的按钮

    总的来说，通过熟练运用CSS，我们可以创造出各种各样的按钮样式，提升网页的用户体验和视觉吸引力。在ASP.NET中，结合服务器控件和CSS，我们可以轻松地将这些设计应用到实际项目中。记得不断探索和实践，让每个细节...

    Silverlight漂亮清爽的按钮样式

    首先，让我们了解一下标题所提及的"漂亮清爽的按钮样式"。在UI设计中，按钮不仅是一个功能组件，也是一个重要的视觉元素。按钮的样式应该既符合功能需求，也要符合整体设计美学。在Silverlight中，我们可以通过...

    css漂亮的多图片按钮样式

    本教程将深入探讨如何利用CSS创建美观且功能丰富的多图片按钮样式，为用户界面增添吸引力和互动性。 首先，我们需要了解CSS的基本结构，它由选择器、属性和值三部分组成。例如，我们可以为一个`&lt;button&gt;`元素设置...

    36种漂亮的CSS3网页按钮Button样式

    设计师可以根据网站的整体风格和品牌色彩，选择合适的按钮样式。 值得注意的是，虽然视觉效果很重要，但按钮的设计也应考虑可用性和可访问性。确保按钮的大小适中，文本清晰可读，且在不同设备和屏幕尺寸下表现良好...

Magicbox
Global site tag (gtag.js) - Google Analytics