还没有任何记录...
自适应宽度的html+css图片提交按钮代码
来源：jquery 特效
作者： jquery 特效
宽度不固定就是可以自适应宽度的html+css图片提交按钮代码 以自适应宽度的html+css图片提交按钮代码，input的css样式中的background: border:是必须的。 宽高大小可以根据input中
宽度不固定就是可以自适应宽度的html+css图片提交按钮代码
以自适应宽度的html+css图片提交按钮代码，input的css样式中的background: border:是必须的。 宽高大小可以根据input中value的值而增大或者缩小。
样式中的width:1 overflow: *html .but_ok input{width:1 overflow:} float:也是必须的你可以尝试删除看看啥效果，或者你发现啥更好的做法，欢迎加入懒人建站QQ群：4188479 讨论
本文链接：/js/texiao/646.html
(责任编辑：懒人建站)
自适应宽度的html+css图片提交按钮代码由懒人建站收集整理，您可以自由传播，请主动带上本文链接
就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
自适应宽度的html+css图片提交按钮代码-相关文章
来自百度的搜索推荐
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）评论- 161&
首先我们来看一下最后的效果图把：
这个就是我们最好的目标。如果敢兴趣的话好吧，那你继续看吧。
首先这个按钮有用到css3.0的新样式属性。如果你的浏览器没有看到边角圆弧的样式，那就说明你的浏览器版本不支持css3.0的新样式。解决办法，升级浏览器到最新的。据我所知XP、Windows Server2003最高支持的是IE8（可以看到效果了），如果你不想升级IE，那们你可要下载不是IE为内核的浏览器，比如火狐、谷歌、Opera等等。
好了前面这么多废话，我们该看一下如何做出我们漂亮的按钮吧。
其实我们这里用到了css的伪元素，hover。
首先我们必须在页面上，放一个input类型的button按钮。对这个button按钮进行css的样式的添加。
具体的css代码如下：
1 .mybtn {
width:86px;
text-align:center;
line-height:<span style="color: #%;
padding-top:<span style="color: #em;
padding-right:2em;
padding-bottom:<span style="color: #em;
padding-left:2em;
font-family:Arial,sans-serif;
font-size:14px;
font-style:normal;
font-variant:normal;
font-weight:normal;
text-decoration:none;
margin-top:0px;
margin-right:2px;
margin-bottom:0px;
margin-left:2px;
vertical-align:text-bottom;
display:inline-block;
cursor:pointer;
outline-width:medium;
outline-color:invert;
font-size-adjust:none;
font-stretch:normal;
border-top-left-radius:<span style="color: #em;
border-top-right-radius:<span style="color: #em;
border-bottom-left-radius:<span style="color: #em;
border-bottom-right-radius:<span style="color: #em;
box-shadow:0px 1px 2px rgba(0,0,0,0.2);
text-shadow:0px 1px 1px rgba(0,0,0,0.3);
color:#fefee9;
border-top-color:#da7c0c;
border-right-color:#da7c0c;
border-bottom-color:#da7c0c;
border-left-color:#da7c0c;
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
background-image:none;
background-attachment:scroll;
background-repeat:repeat;
background-position-x:0%;
background-position-y:0%;
background-size:auto;
background-origin:padding-box;
background-clip:padding-box;
background-color:#f78d1d;
具体的css样式解释还是百度一下吧，这样可以提高你的css水平。如果你不懂css技能，但是想用到这样的效果，那需要修改的就是按钮的width，设置成自己按钮合适的宽度。还有一个就是背景颜色的替换了。
写好css样式，写好input的button按钮之后，我们应该把他们关联起来，只需要在input的button中添加class。&input type="button" class="mybtn" value="我是按钮" /&
现在我们还差最后一部了，就是利用css的伪元素hover，
在写一句mybtn的hover样式。代码如下：
.mybtn:hover {
background: #f47c20;
因为我们鼠标移上去只需要修改背景的颜色，那么我们只需要在hover样式中修改一个属性。
好了。看一下我们的按钮吧。是不是很好看。哈哈哈
阅读(...) 评论()一个清爽的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
最近更新的内容}