`
xinklabi
  • 浏览: 1591566 次
  • 性别: Icon_minigender_1
  • 来自: 吉林
文章分类
社区版块
存档分类
最新评论

几个好看的button样式(转)

 
阅读更多

<style>


button{
 background:#F0F0F0 repeat-x;
 padding-top:3px;
 border-top:1px solid #708090;
 border-right:1px solid #708090;
 border-bottom:1px solid #708090;
 border-left:1px solid #708090;
 width:80px;
 height:auto;
 font-size:10pt;
 cursor:hand;
}


.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>

<button class=btn title="中国站长资讯网"> 中国站长资讯网</button><P></p>
<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
 onmouseout="this.className='btn1_mouseout'"
 title="中国站长资讯网:http://www.chinahtml.com"
> 中国站长资讯网</button>  &nbsp;
<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
 onmouseout="this.className='btn1_mouseout'" DISABLED
> 中国站长资讯网</button>
<P>
<button class=btn2 title="中国站长资讯网"> 中国站长资讯网</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="中国站长资讯网:http://www.chinahtml.com"
> 中国站长资讯网</button>
<P>
<button class=btn_2k3 title="中国站长资讯网:http://www.chinahtml.com"> 中国站长资讯网</button>

分享到:
评论

相关推荐

    好看的button样式CSS

    "好看的button样式CSS"这一主题涉及到以下几个关键知识点: 1. **基本样式设置**:使用`display: inline-block`属性将按钮设置为块级元素,以便占据整行宽度;`padding`属性可以调整内部间距,`font-size`定义字体...

    好看的WPF自定义按钮样式(绝对不亏)

    在WPF中,自定义按钮样式通常涉及以下几个步骤: 1. **定义资源**:在XAML文件的根元素下创建`ResourceDictionary`,并在其中定义按钮的样式。这样可以方便地在整个应用程序中重用该样式。 2. **创建样式**:使用`...

    wpf的button样式

    ### WPF Button样式的深入解析 在WPF (Windows Presentation Foundation) 开发中,自定义控件样式是一项非常重要的技能,尤其是对于按钮(Button)这样的常用控件。通过自定义样式,开发者可以为用户提供更加丰富多样...

    自定义button样式,圆角按钮

    本文将深入探讨如何自定义Button样式,特别是创建具有圆角效果的按钮,即“圆角按钮”。我们将从以下几个方面进行详细讲解: 1. **XML布局中的基本设置** 在Android布局文件中,我们通常使用`&lt;Button&gt;`标签来创建...

    介绍几款经典的C#button样式.docx

    因此,本文将介绍几款经典的 C# Button 样式,帮助开发者快速实现不同的 Button样式。 一、 btn 样式 第一个样式是 btn 样式,这个样式使用了 CSS 来设置 Button 的样式。这个样式的特点是使用了渐变颜色,鼠标...

    类似附带几个button的view,点击button的时候,实现button动画移动

    标题“类似附带几个button的view,点击button的时候,实现button动画移动”所提及的内容,是关于如何在Android或iOS平台上创建一个包含多个按钮的视图,并在用户点击按钮时触发动画效果,使按钮看起来像是在移动。...

    html实现的几款button效果

    默认情况下,浏览器会提供一个简单的样式,但我们可以根据需求通过CSS来定制按钮的外观。 2. 鼠标悬停效果: 通过CSS的`:hover`伪类,我们可以给按钮添加鼠标悬停时的效果: ```css button:hover { background-...

    50个CSS超炫丽button样式

    本资源集合了"50个CSS超炫丽button样式",旨在展示CSS的灵活性和创新性,帮助开发者和设计师们激发灵感,提升网页界面的吸引力。 这些CSS按钮样式各具特色,涵盖了不同的设计风格,包括但不限于以下几点: 1. **...

    用css把a链接模拟成button的样子的方法

    ### 使用CSS将A链接模拟为Button样式的方法 在网页设计中,经常需要让普通的超链接(`&lt;a&gt;`标签)看起来像按钮一样,这样可以增强用户体验,并使界面更加美观、一致。通过使用CSS,我们可以轻松地实现这一效果。本文...

    50个CSS超炫丽button样式代码

    【标签】"C# ASP.NET SQL DBA 源码"虽然与标题中的CSS按钮样式直接关联性不大,但它们代表了IT行业的几个关键领域,这可能意味着这些CSS代码可能被用在基于这些技术构建的项目中。C#和ASP.NET是微软开发的服务器端...

    自绘Button 修改Button背景

    在本例中,我们将关注如何自绘Button,使其具有非标准的背景色和前景色,从而打破传统的VC++ Button样式。"自绘Button 修改Button背景"这个标题表明我们将探讨如何利用`WM_DRAWITEM`消息来改变Button的默认外观。 `...

    介绍几款经典的C#button样式.pdf

    按钮控件(Button)作为用户交互的主要元素之一,其样式和外观设计常常需要根据应用的需求进行定制,以达到吸引用户并提升应用整体美感的目的。本篇文章将介绍几款经典的C#按钮样式,帮助开发者们在创建用户界面时...

    button 样式 代码

    2. CSS Button样式: - 文本样式:可以使用`color`、`font-size`、`font-family`等属性改变按钮的文字颜色、大小和字体。 - 背景和边框:使用`background-color`、`border`、`border-radius`等属性改变按钮背景和...

    C#动态创建button的方法

    在这个示例中,我们首先创建了一个新的`Button`实例,然后设置了它的几个关键属性:`Text`(按钮上的文本)、`Size`(按钮的尺寸)和`Location`(按钮的位置)。接着,我们使用匿名方法(`delegate`关键字)为`Click...

    透明Button 透明Button

    1. **XML布局文件**:在Android的布局文件(如activity_main.xml)中,我们可以定义一个Button元素,并通过设置其背景属性(`android:background`)来实现透明效果。例如,使用`@android:color/transparent`引用系统...

    自定义Button控件,继承Button控件App源码

    我们将讨论以下几个关键知识点: 1. **自定义控件基础**: 自定义控件通常是为了满足特定需求,比如特殊的布局、动画或者交互效果。在Android中,我们可以通过继承已有的View或ViewGroup类来创建自定义控件。在这...

    常见的几个分享可自定义样式

    我们将讨论以下几个关键知识点: 1. **分享组件的原理**: 分享组件通常是通过JavaScript或者HTML5 API实现的,它们通过调用各社交平台提供的API来生成分享链接,然后在用户点击分享按钮时触发。这些API通常要求...

    一个C++的Button按钮类 Hover button 按钮

    在C++中实现这样的Hover按钮,我们需要了解以下几个关键知识点: 1. **窗口库**:通常,C++标准库本身并不提供GUI支持,因此我们需要引入第三方库如Qt、wxWidgets、GTK+等。这里没有具体提及使用哪个库,但我们将以...

    收藏的几个css按钮样式

    这里我们探讨的是几种经典的CSS按钮样式,这些样式可以为网页增添视觉吸引力并提升用户体验。 首先,让我们来看一下`&lt;style&gt;`标签内的CSS代码。这段代码定义了三种不同的按钮类:`.btn`, `.btn1_mouseout`, `.btn1_...

    微信小程序 button 的样式设置为图片的方法

    在实现自定义button为图片的样式时,有几个CSS属性是必须的,例如background-size、background-repeat和border:none。这些属性确保图片能够正确地覆盖整个button区域,没有重复,并且移除了边框,使button看起来更像...

Global site tag (gtag.js) - Google Analytics