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


Tags: html,css,button

Problem :

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?



Solution :

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

    CSS Howto..

    How do I center my content inside the menu?

    How to draw a line with css and show text or image on it

    How to create a nested vertical menu with horizontally sub-menus using css

    Show different forms using buttons with animation

    How to change css dynamic by javascript

    How to change the scrolling text in CSS or JQuery

    How to choose fontstacks

    How to edit jquery slider

    How to see CSS boxes in firefox inspector

    How can I have a div/span “fill in” the remaining width/height of the page, and stay fixed in position?

    How to customize in javascript?

    how to define minimum height for tbody in css

    How to center div and ul using CSS?

    how to move button to left

    How to get an input set to display block to fade in with css

    Show DIV on hover of other DIV that is not parent with CSS or JS [duplicate]

    How can I make an arrow on an instruction box on the right move to point to the field on the left that is in focus?

    How to display an HTML list non-nested?

    How to make the new long shadow trend with CSS?

    How to create a line break instead of having text going on top of itself?

    How to move a circle down by 15px with CSS HTML

    How to set animation in css?

    How do align texts in the child div

    How to animate sections in pure CSS when scrolling the page?

    How to grey out a box in CSS

    How to utilize CSS only button markup?

    css: how to make the third div line up with the first div

    How to set min-height of div to height of viewport?

    How is a CSS “display: table-column” supposed to work?

    how to reference background image urls in css through config entrys