CODEWITHSUNDEEP
htmlcssbutton
bcbishop
bcbishop

Reputation: 2313

how to draw the # of likes bubble like what is on the right side of the facebook like button

For the following facebook like button, there is a # of likes bubble (?) on the right of the button (see below - the bubble with the text of '3.5k' on it)

facebook like button with the bubble on right

The question is - was it drawn using css? How to create it?

Upvotes: 0

Views: 379

Answers (1)

theHarsh
theHarsh

Reputation: 680

Fiddle Link : http://jsfiddle.net/zEVbe/1/

Yes, that bubble can be drawn by CSS in various way. One of the way is written below.

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;
}

Upvotes: 3

Related Questions