对于下面的 facebook 点赞按钮,按钮右侧有一个# of likes 气泡(?)(见下文 - 气泡上带有“3.5k”的文本)
问题是——它是用 css 绘制的吗?如何创建?
最佳答案
fiddle 链接:http://jsfiddle.net/zEVbe/1/
是的,那个气泡可以用 CSS 以各种方式绘制。其中一种方式写在下面。
HTML:
<div class="like">Like</div>
<div class="counter">3.5k</div>
CSS:
body{
font-family:Calibri;
}
.like{
background:#3b5998;
padding:0px 10px;
border-radius:2px;
color:#fff;
cursor:pointer;
float:left;
height:25px;
line-height:25px;
}
.like:hover{
background:#444;
}
.counter{
background:#fafafa;
border:1px solid #aaa;
float:left;
padding:0px 8px;
border-radius:2px;
margin-left:8px;
height: 23px;
line-height:23px;
}
.counter:before{
display:block;
float:left;
content:' ';
width:6px;
height:6px;
background:#fafafa;
margin-left:-12px;
border-right:10px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
margin-top:8px;
border-left:1px solid #aaa;
border-bottom:1px solid #aaa;
}
关于html - 如何绘制喜欢按钮右侧的# of likes bubble,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23333010/