`
tntxia
  • 浏览: 1507256 次
  • 性别: 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_...

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

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

    36个漂亮的按钮样式.rar

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

    photoshop 漂亮 绿色 按钮 样式

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

    WPF炫酷旋转按钮样式

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

    css样式_漂亮的按钮

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

    Silverlight漂亮清爽的按钮样式

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

    css漂亮的多图片按钮样式

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

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

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

    WPF漂亮的窗体样式、按钮样式、复选框样式

    本资源包“WPF漂亮的窗体样式、按钮样式、复选框样式”提供了预设的视觉元素设计，帮助开发者快速构建专业且吸引人的应用程序。 首先，我们来详细了解一下WPF。它是.NET Framework的一部分，用于构建桌面应用，提供...

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

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

    WPF实现漂亮按钮实例

    实现漂亮的按钮效果，关键在于创建和应用自定义的样式。这通常涉及到以下步骤： 1. **定义样式资源**：在XAML文件中，你可以创建一个`&lt;Style&gt;`元素，指定`TargetType="Button"`来定义一个针对`Button`控件的样式。...

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