用css实现这种按钮效果!
其实是一个a标签,左边是一个icon,右边是文字。(只有一个标签!!!)例如:<aclass="yourcssclass">Follow</a>请问这个yourcsscl...
其实是一个a标签,左边是一个icon,右边是文字。(只有一个标签!!!)
例如:
<a class="yourcssclass">Follow</a>
请问这个yourcssclass怎么写【文字样式等可以略过,主要是怎么显示icon】 展开
例如:
<a class="yourcssclass">Follow</a>
请问这个yourcssclass怎么写【文字样式等可以略过,主要是怎么显示icon】 展开
展开全部
用背景就可以呀
比如
a {
display:block; //定义为块元素,才可以使用宽、高、背景
width:120px;
height:40px;
line-height:40px;
color:#FFF;
background:url(icon.gif) no-repeat 10px 15px #F00; //定义背景,图片不重复,距左10像素距顶15像素,背景图片覆盖不到的地方显示背景色#F00
text-indent:40px; //文字缩进40像素,以不和icon重叠
}
以上具体的数字,根据效果来调整
比如
a {
display:block; //定义为块元素,才可以使用宽、高、背景
width:120px;
height:40px;
line-height:40px;
color:#FFF;
background:url(icon.gif) no-repeat 10px 15px #F00; //定义背景,图片不重复,距左10像素距顶15像素,背景图片覆盖不到的地方显示背景色#F00
text-indent:40px; //文字缩进40像素,以不和icon重叠
}
以上具体的数字,根据效果来调整
展开全部
<a class="yourcssclass" style="background:url(biaoqing.png) left top no-repeat;padding-left:2px;">Follow</a>图片的宽度就是你的padding-left内左边距宽度
来自:求助得到的回答
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<style type="text/css">
a.yourcssclass{ display:block; width:122px; height:41px; font-family:'微软雅黑'; color:#fff; background-color:#e74c3c; text-decoration:none; line-height:41px;}
a.yourcssclass span.a1{ font-weight:bolder; font-size:30px; padding:0 10px; vertical-align:middle; }
a.yourcssclass span.a2{ font-size:20px; vertical-align:middle;}
</style>
<a class="yourcssclass" href=""><span class="a1">+</span><span class="a2">Follow</span></a>
a.yourcssclass{ display:block; width:122px; height:41px; font-family:'微软雅黑'; color:#fff; background-color:#e74c3c; text-decoration:none; line-height:41px;}
a.yourcssclass span.a1{ font-weight:bolder; font-size:30px; padding:0 10px; vertical-align:middle; }
a.yourcssclass span.a2{ font-size:20px; vertical-align:middle;}
</style>
<a class="yourcssclass" href=""><span class="a1">+</span><span class="a2">Follow</span></a>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询