<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: 1px;
BORDER-TOP: #7b9ebd 1px solid;
PADDING-LEFT: 1px;
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;
PADDING-BOTTOM: 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.1 普通按钮-扁平化风格 先看效果： 定义Button的样式，详见代码： <Style x:Key=BtnInfoStyle TargetType=...
几个风格好看的CSS3单选复选按钮美化样式，简单的表单单选框、复选框美化代码。 <!DOCTYPE HTML> <html> <head> <title>好看的CSS3单选复选按钮美化样式</title> <link rel=...
您可以创建多种三维的玻璃,金属,塑料甚至XP样式的按钮.您可以创作导航栏,用不同的鼠标掠过效果来创建按钮-突出显示,按压和其它.Crystal Button [水晶按钮]能轻松创建3D图像.您可以修改图像材料和文字,照明,边框类型,...
您可以创建多种三维的玻璃,金属,塑料甚至XP样式的按钮.您可以创作导航栏,用不同的鼠标掠过效果来创建按钮-突出显示,按压和其它.Crystal Button [水晶按钮]能轻松创建3D图像.您可以修改图像材料和文字,照明,边框类型,...
蚂蚁按钮颜色 Ant Design的简单按钮...导入样式CSS或更少 //import css or less import 'antd/dist/antd.css' ; // or 'antd/dist/antd.less' import 'antd-button-color/dist/css/style.css' ; // or 'antd-button-c
C#制作出任意不规则按钮,C#日起函数样式大全,C#算法Code，接口基础，几个C#编程的小技巧，提高C#编程的50个要点，C#基础知识==
本篇主要介绍以下几个基本控件： 1. table 2. form 3. button 1. 表格（table）依旧使用<table><thead><tbody><tr><th><td>来表现表格。有如下的类来控制table的属性， table样式默认会占满父容器 <...
UICollectionViewCell定制Button 效果 特点 1.能够动态设置每行显示的按钮的个数,以及控件的摆放格式 ...然后你的cell上实现他所继承的类的几个方法,并创建你想要的界面. 3.在控制器中导入相关头文件,具体用法,参考
引言 开发ngx（angular 2+ 以后都直接称为ngx）也有1年半的时间了，刚开始开发的时候使用的还是angular2 RC版，现在已经出angular5了，时光飞逝啊！ ngx从设计之初就是一个component-based的框架...我们有一个button，
样式表在几个地方都有!important 。 作为主题作者，我不想写如下内容： .mejs-container .mejs-controls .mejs-button button { width: 100px !important; } 这个项目的作用是为您提供一种更简单的方法来处理这...
比较 使用 Contains 方法。 ArrayList Array1=new ArrayList(); Array1.Add("as"); bool b1=Array1.Contains("as"); MessageBox.Show(b1.ToString()); 第6页 C#（WINFORM）学习 找到集合中数量最多的一个元素 利用...
1.2 CSS的几种设置方式 1 1.2.1 内联样式表 1 1.2.2 嵌入样式表 2 1.2.3 外部样式表 2 1.2.4 输入样式表 3 1.3 样式规则的选择器 3 1.3.1 Html selector 3 1.3.2 class selector 3 第 2 章 JAVASCRIPT的语法 5 2.1 ...
跟这个功能相类似的是，我们聊天对话框有好几个按钮，它们拥有不一样的外观，按理也应该绑定指定需要的外观皮肤资源，于是，我们可以采用以下函数接口实现： BindRes2CtrlbyID(106,IDC_BUTTON_TALK_SERACH); 以上...
这是一个Js / UI / UX项目，我将使用它输入几个名称，它创建了一个由队长和共同队长（随机选择）组成的团队。 此外，还将添加一个随机生成的团队名称（以增加幽默感并保持用户参与度）。立即待办事项： 固定Flexbox...
1.input标签独占一行，与button标签无法同行显示 （使用position属性进行...（如果想让几个input同行，就把他们放在一个大的div里，大的div的class为layui-input-item，然后设置每个包含input的div的属性为layui-inlin
比如一个button上面可能有一个图标，但有时也有可能需 要两个图标；有时有一行文字，但有时也可能有两行不同颜色的文字。界面库产品都需要考虑这些因素。以下是我们在开发 中经常遇到的问题： 控件界面的多样性...
开发系统：Windows10 64位 Ubuntu 14.04 32 位 软件版本：Qt 4.8.6 IAR .0 Altium Designer 13.0 ...(7) 代码重复率有点高，好几处的button样式是相同的，完全可以提取出来，在此请大家海涵。
mxp/在file菜单下增加一个新的命令，可以列出最近编辑的几个文件。就好象Windows开始菜单中的“文档” mxp/现在的插件真是不得了！我恨不的给每个插件都打上5分。这个插件可以做一段Flash动画，用来演示目标文件夹下...
首先你得引入bootstrap与jquery ... ...如果你不想更改显示效果的话实际上CSS都...实际上以上几个组件的样式有很多.我们只需要了解一部分即可 如需了解更多的请转自http://www.gbtags.com/api/bootstrap3.2/bootstrap-doc/co
db : 数据库文件 //删除了多余的几个样式的数据 dialog ： 对话框相关文件 example ： 例子 //可以全部删除 include ： 公用包含文件 sysimage ： 系统图片 //完全可以删除 uploadfile ： 默认的上传文件目录 ...