-5

I am creating a "Like" button for my website. Its my own customized like button that changes some values in database of my website. I want to show LIKE count with a callout background like Twitter "Follow"/"Tweet" and Facebook "Like"/"Share" buttons. Some what like this:

enter image description here

I am unable to form any logic in CSS on how to do that since I am not so pro in CSS. I also inspected Twitter code using Google Chrome's Inspect Element feature, but was unable to find any CSS doing that. Another thing came to my mind was that its just an empty callout image overlapped by a text. But didn't find any image like that. Can anyone please tell me how to do that?

Community
  • 1
  • 1
Shiva Pareek
  • 1,719
  • 5
  • 21
  • 42
  • as you said this can be an image with text overlapping and the image could be created in photoshop check this tutorial http://www.laughing-lion-design.com/2008/08/creating-speech-bubbles-in-photoshop-using-the-custom-shape-tool/ – Zaki Mar 13 '13 at 16:33
  • 1
    Just googling around: https://www.google.it/#hl=it&source=hp&q=facebook%20like%20tooltip%20&aq=f&aqi=g10&aql=&oq=&gs_rfai=&fp=1&bav=on.2,or.r_qf.&cad=b – michele Mar 13 '13 at 16:36
  • What you're looking for is a jQuery plugin called Tipsy (http://onehackoranother.com/projects/jquery/tipsy/) – FLClover Mar 13 '13 at 16:50
  • This is made with a small triangle on a box. See this page for how made the triangle http://css-tricks.com/snippets/css/css-triangle/ – Aristos Mar 13 '13 at 17:07
  • possible duplicate of [How to create a clickable div with a triangle on the side / speech bubble / message box with arrow / tail / triangle](http://stackoverflow.com/questions/30299093/how-to-create-a-clickable-div-with-a-triangle-on-the-side-speech-bubble-mess) – jbutler483 May 20 '15 at 08:32

1 Answers1

4

Try this simplest implementation:

CSS:

.callout {
    position: relative;
    margin: 18px 0;
    padding: 18px 20px;
    background-color: #eef4f9;
    /* easy rounded corners for modern browsers */
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}
.callout .notch {
    position: absolute;
    top: -10px;
    left: 20px;
    margin: 0;
    border-top: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #eef4f9;
    padding: 0;
    width: 0;
    height: 0;
    /* ie6 height fix */
    font-size: 0;
    line-height: 0;
     /* ie6 transparent fix */
    _border-right-color: pink;
    _border-left-color: pink;
    _filter: chroma(color=pink);
}

HTML:

<div class="callout">
    This is a callout box!
    <b class="notch"></b>
</div>

Live demo here: http://jsfiddle.net/yCw3T/

Julia TheAngel
  • 58
  • 4