css圆角背景图片按钮-自适应内容大小
btn自适应内容大小,这已经不是什么新的写法了,很多人都会用的,而且效果上还是比较实用。
这里只是把https://addons.mozilla.org/里面的代码按钮提出来方便使用,图片的名称都没改,想弄清楚图片的就在页面信息里自己看吧
.install-button {
font:bold 14px "Trebuchet MS", Helvetica, "Helvetica Neue", Arial, sans-serif;
}
.install-button:after {
content:".";
clear:both;
display:block;
visibility:hidden;
height:0;
overflow:hidden;
}
.install-button a * {
display:block;
float:left;
position:relative;
}
.install-button a {
float:left;
cursor:pointer;
max-width:290px;
color:#062445;
text-decoration:none;
background:#7cc11c url("https://addons.mozilla.org/img/sprite.png?20090430") 100% -730px no-repeat;
}
.install-button a span {
padding:0 0 0 6px;
background:transparent url("https://addons.mozilla.org/img/installbtn-edges.png") left bottom no-repeat;
}
.install-button a span span {
padding:0 0 8px 0;
background:transparent url("https://addons.mozilla.org/img/installbtn-edges.png") right bottom no-repeat;
}
.install-button a span span span {
left:-6px;
padding:0 0 6px 0;
background:transparent url("https://addons.mozilla.org/img/installbtn-edges.png") left top no-repeat;
}
.install-button a span span span strong {
right:-6px;
padding:10px 45px 0 6px;
background:transparent url("https://addons.mozilla.org/img/installbtn-edges.png") right top no-repeat;
}
.install-button a:hover, .install-button a:focus, .install-button a:active {
color:#0a3b73;
background-color:#9dd34c;
background-position:100% -860px;
}
font:bold 14px "Trebuchet MS", Helvetica, "Helvetica Neue", Arial, sans-serif;
}
.install-button:after {
content:".";
clear:both;
display:block;
visibility:hidden;
height:0;
overflow:hidden;
}
.install-button a * {
display:block;
float:left;
position:relative;
}
.install-button a {
float:left;
cursor:pointer;
max-width:290px;
color:#062445;
text-decoration:none;
background:#7cc11c url("https://addons.mozilla.org/img/sprite.png?20090430") 100% -730px no-repeat;
}
.install-button a span {
padding:0 0 0 6px;
background:transparent url("https://addons.mozilla.org/img/installbtn-edges.png") left bottom no-repeat;
}
.install-button a span span {
padding:0 0 8px 0;
background:transparent url("https://addons.mozilla.org/img/installbtn-edges.png") right bottom no-repeat;
}
.install-button a span span span {
left:-6px;
padding:0 0 6px 0;
background:transparent url("https://addons.mozilla.org/img/installbtn-edges.png") left top no-repeat;
}
.install-button a span span span strong {
right:-6px;
padding:10px 45px 0 6px;
background:transparent url("https://addons.mozilla.org/img/installbtn-edges.png") right top no-repeat;
}
.install-button a:hover, .install-button a:focus, .install-button a:active {
color:#0a3b73;
background-color:#9dd34c;
background-position:100% -860px;
}
<p class="install-button"><a href="#"><span><span><span><strong>在街上看美女,目光高一点就是欣赏,目光低一点就是流氓。</strong></span></span></span></a></p>
max-width在IE6下无效只能加br换行