`
varsoft
  • 浏览: 2519970 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

几个漂亮的Button的CSS

阅读更多
<span id="ArticleContent1_ArticleContent1_lblContent"><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> 好看的CSDN Button</button><P></p>
<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'"
> 好看的Green Button</button> &nbsp;
<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'" DISABLED
> 好看的Green Button</button>
<P>
<button class=btn2> 好看的 e商2003 Button</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'"
> 好看的QQ Button</button>
<P>
<button class=btn_2k3> 好看的 2k3 Button</button>
</body></span>
分享到:
评论
1 楼 coosummer 2015-11-11  
推荐使用http://buttoncssgenerator.com ,可以生成各种效果的按钮css,包括圆角、渐进颜色、阴影,并兼容各大主流浏览器

相关推荐

    好看的button样式CSS

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

    收集几款漂亮的CSS3按钮美化例子.rar

    【描述】中提到的几个关键点: 1. **背景渐变**:CSS3引入了线性渐变和径向渐变,允许我们为按钮创建丰富的背景效果,例如从一种颜色平滑过渡到另一种颜色,增强按钮的层次感和立体感。 2. **圆角按钮**:CSS3的`...

    CSS实现的几个非常漂亮的按钮

    CSS实现的几个非常漂亮的按钮CSS实现的几个非常漂亮的按钮

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

    为了实现这个目标,我们需要关注以下几个CSS属性: 1. **`padding`**:设置内边距。这决定了链接周围的空间大小,有助于创建一个类似按钮的填充效果。 2. **`border`**:定义边框的宽度、样式和颜色。在这里,我们...

    Css Button

    在设计CSS按钮时,有以下几个关键知识点: 1. **基础样式**:首先,一个基本的按钮由`&lt;button&gt;`、`&lt;input type="button"&gt;`或自定义的`&lt;a&gt;`标签创建。通过设置`background-color`、`color`、`font-size`等属性来设定...

    50个CSS超炫丽button样式代码

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

    收藏的几个css按钮样式

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

    50个CSS超炫丽button样式

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

    css button

    在“CSS3_button”这个压缩包中,可能包含了不同样式的CSS按钮示例,比如渐变背景、不同形状、动画效果等,你可以通过查看这些文件学习和应用到自己的项目中。在实际开发中,要确保自定义的CSS按钮在各种浏览器和...

    好几组漂亮的Bootstrap水晶玻璃CSS按钮

    在这个特定的资源包中,我们关注的是"水晶玻璃CSS按钮",这是一种在Bootstrap基础之上进行的视觉增强设计。 水晶玻璃按钮的设计灵感来源于材料设计(Material Design)中的漂浮动作按钮(FAB),其特点是具有透明度...

    html实现的几款button效果

    以上就是HTML实现的几款按钮效果,结合CSS和JavaScript,您可以创造出更多富有创意和交互性的按钮,提升用户体验。记得在实际应用中,始终考虑可访问性和兼容性,以确保所有用户都能顺利地使用您的网站。

    react-一个简单的注入CSS的React组件

    通常,项目会包含以下几个部分: 1. `src/components`:包含React组件的目录。 2. `src/styles`:存放CSS文件的目录,每个组件对应一个CSS文件。 3. `webpack.config.js`或`babel.config.js`:配置文件,用于设置...

    几种气泡按钮样式CSS3

    在压缩包“css3气泡按钮-buttons”中,通常会包含一个或多个CSS文件,这些文件预定义了上述各种气泡按钮样式的CSS类。你可以通过在HTML中添加相应的类,轻松地将这些样式应用到你的按钮元素上。 ```html &lt;button ...

    css实现登陆界面的代码

    在这个主题中,我们将深入探讨如何使用CSS来创建一个登录界面。登录界面是网站或应用程序的重要组成部分,它为用户提供了一个输入用户名和密码的安全入口点。 首先,我们需要理解CSS的基本结构。CSS由选择器和声明...

    CSS3魔幻按钮 按钮的几种酷炫形态

    随着技术的发展,CSS3为按钮设计带来了无尽的可能性,使得按钮不仅具备基本的功能性,还能呈现出丰富的视觉效果。本文将深入探讨如何利用CSS3的特性,尤其是移动属性和定位,来创建具有酷炫形态的“魔幻按钮”。 ...

    IOS BUTTON WHITH HTML5 & CSS3

    在实现iOS按钮效果时,你需要掌握以下几个CSS3特性: 1. **伪类选择器**:例如`:hover`、`:active`和`:focus`,这些用于在不同状态(鼠标悬停、按下或获得焦点时)改变按钮的样式。 2. **边框半径(border-radius...

    css书写高效的CSS-CSS的渲染效率

    本文将从几个方面探讨如何通过改进CSS编写技巧来提高页面的渲染效率。 #### 1. 使用简化的颜色值定义 在定义颜色值时,可以采用更简短的形式,如三字符十六进制值而非标准的六字符形式。例如: - **简化版**: `...

    animate.css 是一个 CSS3 动画库,它预设了抖动、闪烁、弹跳等多种动画效果

    Animate.css 是一个强大的开源 CSS3 动画库,它为开发者提供了一系列预先设计好的动画效果,使得在网页设计中添加动态元素变得简单易行。这个库包含了许多有趣的动画,如抖动、闪烁、弹跳等,可以极大地提升用户体验...

    6种炫酷的CSS3按钮边框动画特效

    这六个按钮边框动画可能包括但不限于以下几种效果: 1. **渐变边框**:当鼠标悬停在按钮上时,边框颜色逐渐变化,创造出平滑过渡的效果。 2. **旋转边框**:边框围绕按钮边缘旋转,增加动态视觉感。 3. **脉冲边框*...

Global site tag (gtag.js) - Google Analytics