`
fengzgxing
  • 浏览: 243624 次
  • 性别: Icon_minigender_1
  • 来自: 四川
社区版块
存档分类
最新评论

Button CSS 样式

    博客分类:
  • HTML
阅读更多
.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
}
分享到:
评论
1 楼 coosummer 2015-11-11  
推荐使用http://buttoncssgenerator.com ,可以生成各种效果的按钮css,包括圆角、渐进颜色、阴影,并兼容各大主流浏览器

相关推荐

    好看的button样式CSS

    本文将深入探讨如何使用CSS(层叠样式表)来创建好看且具有吸引力的button样式。 首先,CSS是网页设计中的核心技术之一,用于控制网页元素的外观和布局。通过CSS,我们可以定制按钮的颜色、大小、形状、边框、阴影...

    CssButton按钮样式

    本文将深入探讨如何使用CSS来创建美观且功能丰富的“CssButton”按钮样式,以及相关的实践示例。 一、基础按钮样式 一个基本的HTML按钮元素看起来像这样: ```html <button>点击我</button> ``` 默认情况下,...

    button按钮样式美化

    `button.css`是CSS样式表,包含以上提到的美化代码;`访问脚本之家.html`可能是参考链接或其他相关资源;`image`目录可能存储了按钮所需的图片资源;`readme.txt`可能是关于项目的基本说明或使用指南。 通过熟练...

    50个css button样式

    "50个css button样式"这个资源提供了一系列CSS代码示例,旨在帮助开发者创造出吸引眼球、功能各异的按钮。下面,我们将深入探讨CSS如何用于定制按钮样式,并通过这些例子学习如何提升网页设计的质量。 首先,CSS...

    好看的button样式

    在这50个CSS样式代码中,你可能会发现各种创意设计,如3D效果、玻璃质感、动画过渡、图标结合等。例如,实现一个带有微动效的按钮: ```css button:hover { transform: translateY(-2px); box-shadow: 0 4px 8px ...

    Button的CSS样式

    最后,压缩包中的"buttonCSS"可能包含示例CSS代码或HTML页面,供学习和参考。通过研究这些代码,你可以更好地理解如何实际应用上述概念,从而提升你的CSS技能。记得实践是检验真理的唯一标准,动手尝试并不断优化你...

    常用控件CSS样式

    "常用控件CSS样式"是一个集合,包含了各种经典且美观的CSS样式,适用于多种常见的网页控件,这些样式可以自定义并应用于项目中,以提升用户体验和界面美观度。 "设计模edo-Flat-UI-c4d26b2"这个文件很可能是这个...

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

    3. **36种漂亮的CSS3网页按钮Button样式.html** - 主要资源,包含了实际的HTML代码和CSS样式,用户可以直接复制粘贴到自己的项目中,或者作为参考进行修改和创新。 详细知识点: 1. **CSS3伪类选择器**:`:hover`,...

    50个CSS超炫丽button样式

    "50个CSS超炫丽button样式"集合提供了丰富的CSS代码示例,帮助设计师和开发者轻松实现各种创意和功能性的按钮设计。这些样式设计涵盖了多种风格、颜色、形状和动画效果,使得网页的互动元素更加生动有趣。 首先,...

    openLayers修改button图标样式

    `olControlSaveFeatures`是一个预设的类名,它对应于OpenLayers的默认样式表`style.css`中的某个样式规则。 默认情况下,OpenLayers的样式表(通常位于`openlayers/theme/default/style.css`)会为`...

    ASP.net开发经典button样式

    2. **样式修改**:为了改变Button的外观,我们可以利用CSS来定制样式。首先,为Button控件添加`CssClass`属性,然后在CSS文件中定义相应的类。例如: ```asp <asp:Button ID="btnClassic" runat="server" Text=...

    6套css3的button按钮样式

    用心打造每一份资源。 qq:2488602922 收集很全的6套css3的button按钮样式.rar

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

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

    50个CSS超炫丽button样式代码

    "50个CSS超炫丽button样式代码"集合提供了一组丰富的CSS代码示例,帮助设计师们轻松打造出各种吸引眼球的按钮样式。下面,我们将详细探讨这些知识点,并展示如何利用CSS来提升按钮的设计水平。 1. CSS基础样式:CSS...

    html css button样式

    在网页设计中,HTML(超文本标记语言)和CSS(层叠样式表)是构建用户界面的两大核心技术。本文将深入探讨如何使用HTML和CSS来创建美观且功能丰富的按钮样式。 首先,HTML中的`<button>`元素是创建按钮的基础。通过...

    CSS button例子

    本篇文章将深入探讨“CSS button例子”这个主题,通过分析提供的文件“32、分享50个CSS超炫丽button样式代码下载”,我们将探索多种CSS技术来创建吸引人的按钮。 1. **基础样式**:CSS的基础按钮样式通常涉及`...

    50个CSS超炫丽button样式代码下载

    【标题解析】:“50个CSS超炫丽button样式代码下载”这个标题表明这是一个关于CSS设计的资源包,特别关注于按钮(button)的样式。它提示我们将学习50种不同的CSS代码实现,用于创建吸引眼球且具有视觉冲击力的按钮...

    css样式 

    "万用的B/S下按钮样式"是一种通用的、可复用的CSS样式设计,旨在实现一次编写,全局调用的目标,提高开发效率并保持页面样式的一致性。这种设计与传统的样式应用和调用方式有显著区别,传统方式可能涉及内联样式、...

    jQuery制作控制css样式表切换各个样式表

    通过使用jQuery,我们可以轻松地实现动态切换不同的CSS样式表,从而改变网页的视觉效果。下面将详细讲解如何使用jQuery来实现这一功能。 首先,我们需要在HTML文档中引入jQuery库。通常,我们可以通过CDN链接或者...

Global site tag (gtag.js) - Google Analytics