您的位置： >
css改变按钮的背景颜色和文字颜色
【实例介绍】css改变按钮的背景颜色和文字颜色表单在网页中应用非常广，凡是留言、论坛、提交信息等都在其运用范围之中。但是HTML在这方面的功能非常有限，如果想制作出更酷、更美的表单，还需要CSS的支持。下面通过实例讲述利用CSS改变按钮的背景颜色和文字颜色，代码如下。【实例代码】
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&META http-equiv=Content-Type content=&text/ charset=gb2312&&
&META content=&MSHTML 6.00.& name=GENERATOR&
&style type=&text/css&&
border:1 solid #FFCC00;
color: #FFCCFF;
font-size: 9
font-style:
font-variant:
font-weight:
height: 18
line-height:
background-color: #9900FF;
&title&改变按钮的背景颜色和文字颜色&/title&
&BODY topMargin=0 marginheight=&0& marginwidth=&0&&
& 　　　　　　　　
&&&&& 　　　　
&&&&&&& &input type=&submit& name=&Submit& value=&注册& class=&ys&&
&&&&& &input name=&Submit2& type=&reset& class=&ys& value=&登录& &
&/BODY&&/HTML&
【代码分析】在代码中，加粗部分的标签为设置按钮样式，如图15．8所示。&【素材及源码下载】请点击：&下载本实例相关素材及源码&
&& 评论：0
&& 评论：0
&& 评论：0
&& 评论：0
&& 评论：0
&& 评论：0
&& 评论：0
&& 评论：0
&& 评论：0
&& 评论：0
推荐图文教程
[推荐][推荐][推荐][推荐][推荐]本章节我们为大家介绍使用 CSS 来制作按钮。
基本按钮样式
默认按钮 CSS 按钮
.button {&&& background-color: #4CAF50; /* Green */&&& border:&&&
color:&&& padding: 15px 32&&& text-align:&&&
text-decoration:&&& display: inline-&&& font-size: 16
我们可以使用 background-color 属性来设置按钮颜色:
.button1 {background-color: #4CAF50;} /* Green */.button2
{background-color: #008CBA;} /* Blue */.button3 {background-color:
#f44336;} /* Red */
.button4 {background-color: #e7e7e7; color:} /* Gray */ .button5
{background-color: #555555;} /* Black */
我们可以使用 font-size 属性来设置按钮大小:
.button1 {font-size: 10}.button2 {font-size: 12}.button3
{font-size: 16}
.button4 {font-size: 20}.button5 {font-size: 24}
我们可以使用 border-radius 属性来设置圆角按钮:
.button1 {border-radius: 2}.button2 {border-radius: 4}.button3
{border-radius: 8}
.button4 {border-radius: 12}.button5 {border-radius: 50%;}
按钮边框颜色
我们可以使用 border 属性设置按钮边框颜色:
.button1 {&&& background-color:&&& color:&&&
border: 2px solid #4CAF50; /* Green */}...
鼠标悬停按钮
我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。
提示: 我们可以使用 transition-duration 属性来设置 "hover" 效果的速度:
.button {&&& -webkit-transition-duration: 0.4s; /* Safari */&&&
transition-duration: 0.4s;}.button:hover {&&&
background-color: #4CAF50; /* Green */&&& color:}...
鼠标悬停后显示阴影
我们可以使用 box-shadow 属性来为按钮添加阴影:
.button1 {&&& box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0
rgba(0,0,0,0.19);}.button2:hover {&&& box-shadow: 0 12px
16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);}
我们可以使用 opacity 属性为按钮添加透明度 (看起来类似
"disabled" 属性效果)。
提示: 我么可以添加 cursor 属性并设置为
"not-allowed" 来设置一个禁用的图片:
.disabled {&&& opacity: 0.6;&&& cursor: not-}
默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 width 属性来设置按钮的宽度:
提示: 如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。
.button1 {width: 250}.button2 {width: 50%;}.button3 {width:
移除外边距并添加 float:left 来设置按钮组:
.button {&&& float:}
带边框按钮组
我们可以使用 border 属性来设置带边框的按钮组:
.button {&&& float:&&& border: 1px
solid green}
鼠标移动到按钮上后添加箭头标记:
点击时添加 "波纹" 效果:
点击时添加 "压下" 效果:
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码CSS 修改 IOS 默认按钮样式_前端吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：47,549贴子：
CSS 修改 IOS 默认按钮样式收藏
第一：关于按钮首先这张图是没有用CSS做任何修饰的样式：然而我们希望的是这样子的：所以我们就要用我们的CSS来装饰一下喽。只要在样式里面加一句去掉css去掉iPhone、iPad的默认按钮样式就可以了！~input[type=&button&], input[type=&submit&], input[type=&reset&] {
-webkit-appearance:}textarea { -webkit-appearance:}
如果还有圆角的问题，.button{ border-radius: 0; }第二：关于表单我们在写表单的时候会发现一些浏览器对表单赋予了默认的样式，如在Chorme浏览器下，文本框及下拉选择框当载入焦点时，都会出现发光的边框，并且在火狐及谷歌浏览器下，多行文本框textarea还可以自由拖拽拉大，另外还有在IE10下，当文本框输入内容后，在文本框的右侧会出现一个小叉叉，等等。不容置疑，这些效果是在用户体验上得到了提升，但有些时候我们并不需要这些默认的样式，那怎么办呢？下面我们就来分别看一下解决办法。& 1 &、去除Chrome等浏览器文本框默认发光边框input:focus, textarea:focus {
outline:}去掉高光样式：input:focus{
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-}当然这样以来，当文本框载入焦点时，所有浏览器下的文本框的边框都不会有颜色上及样式上的变化了，但我们可以重新根据自己的需要设置一下，如：input:focus,textarea:focus { outline: border: 1px solid #f60;}这样的话，当文本框载入焦点时，边框颜色就会变为橙色，给用户一个反馈。& 2 &、去除IE10+浏览器文本框后面的小叉叉只需下面一句就ok了input::-ms-clear {
display:}&3 &、禁止多行文本框textarea拖拽这样按下面添加属性多行文本框就不能拖拽放大缩小了：textarea { resize:}在这里要提到一个属性resize，这个是CSS3属性，用于元素缩放，它可以取以下几个值：none 默认值both 允许水平方向及垂直方向缩放horizontal 只允许水平方向缩放vertical 只允许垂直方向缩放不仅可以针对textarea元素，对大多数元素都适用，如div等，在这里不一一列举，但与textarea不同的是，对div使用时需要加上一句overflow:，也就是这样才有效果：div { resize: overflow:}
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或如何制作一个漂亮的 CSS 按钮
如今 Web Application 横行，在 Web 2.0 网站的各种设计元素中，按钮是无法或缺的。如何用最简洁的方法制作最漂亮的按钮就成为了一个问题。本文讲述的方法，代码上简洁，符合 XHTML 标准，不需要 Javascript，只需要纯 CSS 即可完成，而且通用性很好，使用起来也很方便。上图即为最终成品的例子，下面我将详述整个制作过程，相信通过这个教程您肯定可以学会。
第一步：准备图片
对于一个好的 UI，一个很重要的方面就是要能及时的与用户发生交互。对于按钮来说，我们需要让按钮相应各种鼠标事件，让用户知道它是可以按下的。如上图，我们要制作的按钮共有三种状态：正常状态、鼠标划过、鼠标按下。通常情况下，我们会想到利用 onclick、onmouseover 这样的事件来控制，而事实上，我们完全可以利用通用性、便捷性更好的 CSS 代替 Javascript 来完成这个过程。尽可能将表现的事情交给 CSS 来做，这也是良好设计的原则之一。
为了能够实现这种效果，我们需要准备三个状态的图片。利用 CSS 的 background-position 属性，我们完全可以将三种状态的图片放在一张图片中，这样可以获得更好的缓存效果。
此外，按钮两侧的圆角也是比较烦人的问题。因为我们要制作的按钮需要能够自动适应内部文字的长度，因此我们需要应用一种叫做“”的 CSS 技巧。具体原理不讲了，这里只介绍具体做法：
我们使用超链接来生成按钮，为了使用 Sliding door technique，我们需要按照如下方式书写 HTML 代码：
&a class="button" href="http://some_where"&&span&Button Text&/span&&/a&
随后，我们需要准备两张图片，作为按钮的背景（分别为 span 标签和 a 标签的），具体示意图如下：
这里需要指出，280px 并不是绝对的，它代表了这个按钮在您的应用中可能用到的最大值。此外，所有的值都可以根据您实际的背景图做出更改。
第二步：书写 CSS 代码
为了能够让 A 标签准确的显示我们需要的效果，我们需要设定其 display 属性为 block，但是，很多情况下，我们需要在同一行中显示多个按钮，我们可以通过设定 float:left 或 float:right 来达到。提醒一下，这样设定後，当您放置完按钮后不要忘记 clear 一下
首先看看显示基本布局的代码，本例中，两侧圆角部分为 10px，按钮高度为 24px，保留区域为 1px：
a.button {& & & background:&transparent url(a.gif) no-repeat scroll right top;& & & color:&White;& & & display:█& & & float:&left;& & & height:&24px;& & & padding-right:&10px;& & & font:&normal 12px sans-serif;& & & margin-right:&10px;& & & text-decoration:&none;& & }& & a.button&span {& & & background:&transparent url(span.gif) no-repeat;& & & display:█& & & padding:&5px 1px 5px 11px;& & & line-height:&14px;& & }
这里需要指出的是：1. 保留区 (1px) 是包含在 SPAN 中的，具体可以注意看 padding 的设置；2. SPAN 的 line-height + padding-top + padding-bottom = A 的 height。
经过这样设定后，我们的按钮的基本样式就完成了，但它还没有交互效果，我们通过设定 a:hover 和 a:active 来实现：
a.button {& & & background-position:&right -24px;& & }& & a.button&span {& & & background-position:&left -24px;& & }& & a.button&{& & & background-position:&right -48px;& & }& & a.button&span {& & & background-position:&left -48px;& & & padding:&6px 0 4px 12px;& & }
我们看到，主要是应用了 background-position 属性调整背景图片的位置，这比使用多张图片效果更好。在 a.button:active span 中，我们重新设定了 padding 的值，使字符向右下方移动 1px，按下的效果更明显，这也是之前提到的保留区的作用。
第三部：最后完善
其实做完上面两部，我们的按钮基本上已经完工了。但是在各种浏览器中都有一个讨厌的问题，就是当超链接被点击后，会留下一个讨厌的虚线框。这个破坏美观的东西，我们当然要干掉它。
Firefox、Safari 等支持 W3C CSS2 的浏览器，可以通过设定 CSS 的 outline 属性来做到这一点。在我们这个例子中，只需做如下改动：
a.button {& & & background-position:&right -48px;& & & outline:&none;& & }
在 Firefox 中看看，虚框已经消失了。
但 Internet Explore 不吃这一套，对付它就比较麻烦了，单单 CSS 无法解决问题，需要从 HTML 下手。我们需要将按钮的 HTML 代码改为以下形式：
&a class="button" href="http://some_where" onclick="this.blur();"&&span&Button Text&/span&&/a&
这样，我们可以让超链接在点击后迅速失去焦点，从而避免虚框的出现。当然，如果我们应用中按钮比较少，这个方法还不错。但按钮比较多的情况下，我们还是应该用 DOM 方法来为 className 为 button 的 A 修改 onclick 事件（用 jQuery 或 Prototype 实现会很省心），不过这不在本文讨论的范围内了。
TA的推荐TA的最新馆藏[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&一个清爽的button按钮样式
作者：佚名
字体：[ ] 来源：互联网 时间：03-17 16:49:02
button在提交表单中经常会用到，本文主要为大家介绍一个清爽的buttom样式，并附素材图片，感兴趣的朋友可以测试下
效果如下： &代码如下: &html& &head& &title&&/title& &style type="text/css"& .clear { /* generic container (i.e. div) for floating buttons */ overflow: width: 100%; } a.button { background: transparent url('IMG/bg_button_a.gif') no-rep color: #444; display: float: font: normal 12px arial, sans- height: 24 margin-right: 6 padding-right: 18 /* sliding doors padding */ text-decoration: } a.button span { background: transparent url('IMG/bg_button_span.gif') no- display: line-height: 14 padding: 5px 0 5px 18 } a.button:active { background-position: color: #000; outline: /* hide dotted outline in Firefox */ } a.button:active span { background-position: padding: 6px 0 4px 18 /* push text down 1px */ } &/style& &/head& &body& &a class="button" href="javascript:void(0);"&&span&按钮&/span&&/a& &/body& &/html& 这是IMG文件夹下的两张图片： bg_button_a: &bg_button_span:
大家感兴趣的内容
12345678910
最近更新的内容