用css样式控制做成的按钮,取代图片按钮

Post by 张美工, 2009-3-20, Views:

用css样式控制做成的按钮,取代图片按钮
<style>
input {
font-family: "Tahoma", "Arial", "sans-serif";
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
text-decoration: none;
background-color:#FFFFFF;
border-color: #aecde7;
border-style: solid;
border-width: 1px;
padding-top: 1px;
}
input.button {
height: 20px;
padding-top: 0px;
border: 1px solid #AECDE7;
border-top: 1px solid #AECDE7;
border-left: 4px solid #AECDE7;
background-color: #FFFFFF;
}

button{
font-size: 12px;
height: 20px;
padding-top: 2px;
border: 1px solid #AECDE7;
border-top: 1px solid #AECDE7;
border-left: 4px solid #AECDE7;
background-color: #FFFFFF;

}
</style>
<input type="text" name="T1" size="20"><br>
<input type="submit" value="用户登录" name="B1" class="button"><br>
<input type="reset" value="重 置" name="B2" class="button">

<style>
.btn1{border-color:#3568CC;border-top-width:0px;border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px;}
</style>
<input type="text" name="T1" size="10" class="btn1">

<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>
</head>

<body>
<button class=btn title="这是CSDN的官方按钮">好看的CSDN Button</button><P></p>
<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'"
title="这是原创按钮"
> 好看的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 title="这是e商官方按钮"> 好看的 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'"
title="这是原创按钮"
> 好看的QQ Button</button>
<P>
<button class=btn_2k3 title="这是原创按钮"> 好看的 2k3 Button</button>

<style>
input{
border: 3px double #7BC76B;
height: 22px;
width: 60px;
background-color: #F2F2F2;
font-size: 12px;
padding-top: 1px;
cursor: hand;
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997);
}
</style>
<input name="username" type="text" id="username" size="17" maxlength="17">
<input type="button" name="Submit" value="下一步">
 
 

 

   DIV+CSS 内容目录总  　为了方便喜欢网站UE设计的各位朋友讨论和学习,特地将DIV+CSS全部内容的目录罗列出来　　　　　　　　　　　　　　　　　　　　　　　　　　　　

# Dreamweaver的超级技巧汇总(6)
# Dreamweaver的超级技巧汇总(5)
# Dreamweaver的超级技巧汇总(4)
# Dreamweaver的超级技巧汇总(３)
# Dreamweaver的超级技巧汇总(2)
# Dreamweaver的超级技巧汇总(1)
# 在线QQ MSN TEL交谈工具代码
# 方便使用的一些小简短input\form代码
# VSS使用手册
# JS表单判断函数代码大全 (三)
# JS表单判断函数代码大全 (二)
# JS表单判断函数代码大全 

 

#  I E和火狐的css兼容性问题归总

#  体验css+div 之　CSS hack:区分IE6，IE7，firefox

#  体验css+div 之 兼容标准XHTML的浮动层特效实现

#  因为编码差异 导致IE6不能正常解析CSS文件

#  商业网站响应用户需求重视与Firefox兼容


#  frameset 的属性
#  frameset元素属性详解、浮动框架的制作、超链接与框架的制作

 

#  体验css+div 之 SEO

#  40个网页常用小代码

#  div+css样式几个小精华

#  网站用户体验--CSS常用小技巧

#  体验css+div 之 css技巧-经典中的经典

#  体验css+div 之 CSS样式表设计的十条技巧

#  体验css+div 之 网页切图过程中div+css命名规则

#  网站用户体验--根据项目需求定义 常用CSS2基本定义例子
#  体验css+div 之 三种使网站背景图片自动适应浏览器大小的方法

 

#  搜索

#  创建锚链接

#  如何让单行文本框input与多行文本框textarea背景透明

#  用EditPlus转化文件格式到UTF-8
#  让长字符URL/Email自动换行

#  HTML特殊字符显示

 

#  体验css+div定位与table定位代码的差异
#  体验css+div 之 TBody是什么意思?有什么作用?<TBODY>和<BODY>有和区别？

 

#  体验css+div 简单的滑动门效果代码

#  体验css+div 超实用的滑动门效果代码（css和代码都包含在内）

 

#  彻底弄懂CSS盒子模式(DIV布局快速入门)

#  如何把握网页布局
#  实例详解CSS网页布局原理

#  体验CSS+DIV 之 基本布局

#  体验css+div 之 解决流体布局的问题
#  体验css+div 之 固定宽度布局、流体布局、弹性布局的优势对比＜弹性布局＞
#  体验css+div 之 固定宽度布局、流体布局、弹性布局的优势对比＜流体布局＞
#  体验css+div 之 固定宽度布局、流体布局、弹性布局的优势对比＜固定宽度布局＞

 

 

 

#  体验css+div 之 为什么css+div 会盛行
#  体验css+div中id和class各自的用法及区别

#  体验css+div 之 规划、组织和维护样式表

#  体验css+div 之 基本列表样式

#  体验css+div 之 为样式找到目标

 

#  体验css+div 之 圆角框

#  体验css+div 之 层叠和特殊性
#  css之自动换行

#  CSS控制连续英文字母或数字强制换行

#  让css使网页图片半透明

#  体验css+div 之 背景透明内容不透明的写法
#  体验css+div 之 给整个页面添加渐变背景
#  用css样式控制做成的按钮,取代图片按钮

#  体验css+div 之 鼠标经过按钮发生变化效果
#  体验css+div 之 文本框自适应窗口宽度
#  体验css+div 老问题重新讲“怎样使页面整体居中”
#  体验css+div之图像替换 1.徽标图像替换
#  体验css+div 之 使用自动空白边让设计居中 

 

                                                                                                                   +     

Tags: cssdiv 图片按钮 css样式 
分类:css+div | 评论:0 | 引用:0
上一篇：40个网页常用小代码
下一篇：让css使网页图片半透明

或许你还对下面的文章感兴趣

Comments

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

<#template:pagebar#>

最新文章

最新评论

Guest

Powered By Z-Blog 1.8 Spirit Build 80605. Based on valid CSS 2.0 欢迎各界朋友光临本站，一起学习、共同探讨！
Copyright zhangming WebSite. Some Rights Reserved.