Hello Readers

If you want to create speech bubbles using css3, here is the code that will help you.

This blog post will tell you how to make CSS speech bubble without using any image. You need a <div> element. Though I’m using anchor tag here (which works fine too).

Style the outer box anchor tag giving the following class (.btn-hvr). You need to write some rules for your div tag.  Add these pseudo elements :before or :after. HTML classes will be created using these two. I am providing below the CSS given for the main class .btn-hvr.  

The essential property used here is position: relative. It is necessary for the speech bubble pointer. For that purpose, a separate class .hvr-bubble is given and styling is done accordingly .

Now, comes the time to create the triangular bubble pointer. We can use CSS borders to create any type of triangle. As a brief explanation, examine an element with wide differently-colored borders  and give position according to speed bubble.

We will reduce the width and height of our element to 0px and use different sized borders. Different types of triangles can be seen forming.

On hover, we used ‘translate’ property that show the speech bubbles

HTML:

<div>
<a class="btn btn-hvr hvr-bubble-top" href="#">Bubble Top</a>
<a class="btn btn-hvr hvr-bubble-right" href="#">Bubble Right</a>
<a class="btn btn-hvr hvr-bubble-bottom" href="#">Bubble Bottom</a>
<a class="btn btn-hvr hvr-bubble-left" href="#">Bubble Left</a>
<a class="btn btn-hvr hvr-bubble-float-top" href="#">Bubble Float Top</a>
<a class="btn btn-hvr hvr-bubble-float-right" href="#">Bubble Float Right</a>
<a class="btn btn-hvr hvr-bubble-float-bottom" href="#">Bubble Float Bottom</a>
<a class="btn btn-hvr hvr-bubble-float-left" href="#">Bubble Float Left</a>
</div>

CSS:

.btn-hvr {
    background: #1174B0 none repeat scroll 0 0;
    border: 0 none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    line-height: 1 !important;
    margin: 10px 5px;
    padding: 14px;
    text-decoration: none;
    
}
/* bubble top */
.hvr-bubble-top {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    vertical-align: middle;
}
.hvr-bubble-top::before {
    border-color: transparent transparent #1174B0;
    border-style: solid;
    border-width: 0 10px 10px;
    content: "";
    left: calc(50% - 10px);
    pointer-events: none;
    position: absolute;
    top: 0;
    transition-duration: 0.3s;
    transition-property: transform;
    z-index: -1;
}
.hvr-bubble-top:hover::before, .hvr-bubble-top:focus::before, .hvr-bubble-top:active::before {
    transform: translateY(-10px);
}
/* bubble right */
.hvr-bubble-right {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    vertical-align: middle;
}
.hvr-bubble-right::before {
    border-color: transparent transparent transparent #1174B0;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    content: "";
    pointer-events: none;
    position: absolute;
    right: 0;
    top: calc(50% - 10px);
    transition-duration: 0.3s;
    transition-property: transform;
    z-index: -1;
}
.hvr-bubble-right:hover::before, .hvr-bubble-right:focus::before, .hvr-bubble-right:active::before {
    transform: translateX(10px);
}
/*bubble bottom*/
.hvr-bubble-bottom {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    vertical-align: middle;
}
.hvr-bubble-bottom::before {
    border-color: #1174B0 transparent transparent;
    border-style: solid;
    border-width: 10px 10px 0;
    bottom: 0;
    content: "";
    left: calc(50% - 10px);
    pointer-events: none;
    position: absolute;
    transition-duration: 0.3s;
    transition-property: transform;
    z-index: -1;
}
.hvr-bubble-bottom:hover::before, .hvr-bubble-bottom:focus::before, .hvr-bubble-bottom:active::before {
    transform: translateY(10px);
}
/* bubble left */
.hvr-bubble-left {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    vertical-align: middle;
}
.hvr-bubble-left::before {
    border-color: transparent #1174B0 transparent transparent;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    top: calc(50% - 10px);
    transition-duration: 0.3s;
    transition-property: transform;
    z-index: -1;
}
.hvr-bubble-left:hover::before, .hvr-bubble-left:focus::before, .hvr-bubble-left:active::before {
    transform: translateX(-10px);
}
/* bubble float top */
.hvr-bubble-float-top {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: transform;
    vertical-align: middle;
}
.hvr-bubble-float-top::before {
    border-color: transparent transparent #1174B0;
    border-style: solid;
    border-width: 0 10px 10px;
    content: "";
    left: calc(50% - 10px);
    position: absolute;
    top: 0;
    transition-duration: 0.3s;
    transition-property: transform;
    z-index: -1;
}
.hvr-bubble-float-top:hover, .hvr-bubble-float-top:focus, .hvr-bubble-float-top:active {
    transform: translateY(10px);
}
.hvr-bubble-float-top:hover::before, .hvr-bubble-float-top:focus::before, .hvr-bubble-float-top:active::before {
    transform: translateY(-10px);
}
/* bubble float right */
.hvr-bubble-float-right {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: transform;
    vertical-align: middle;
}
.hvr-bubble-float-right::before {
    border-color: transparent transparent transparent #1174B0;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    content: "";
    position: absolute;
    right: 0;
    top: calc(50% - 10px);
    transition-duration: 0.3s;
    transition-property: transform;
    z-index: -1;
}
.hvr-bubble-float-right:hover, .hvr-bubble-float-right:focus, .hvr-bubble-float-right:active {
    transform: translateX(-10px);
}
.hvr-bubble-float-right:hover::before, .hvr-bubble-float-right:focus::before, .hvr-bubble-float-right:active::before {
    transform: translateX(10px);
}
/* bubble float bottom */
.hvr-bubble-float-bottom {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: transform;
    vertical-align: middle;
}
.hvr-bubble-float-bottom::before {
    border-color: #1174B0 transparent transparent;
    border-style: solid;
    border-width: 10px 10px 0;
    bottom: 0;
    content: "";
    left: calc(50% - 10px);
    position: absolute;
    transition-duration: 0.3s;
    transition-property: transform;
    z-index: -1;
}
.hvr-bubble-float-bottom:hover, .hvr-bubble-float-bottom:focus, .hvr-bubble-float-bottom:active {
    transform: translateY(-10px);
}
.hvr-bubble-float-bottom:hover::before, .hvr-bubble-float-bottom:focus::before, .hvr-bubble-float-bottom:active::before {
    transform: translateY(10px);
}
/* bubble float left */
.hvr-bubble-float-left {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: transform;
    vertical-align: middle;
}
.hvr-bubble-float-left::before {
    border-color: transparent #1174B0 transparent transparent;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    content: "";
    left: 0;
    position: absolute;
    top: calc(50% - 10px);
    transition-duration: 0.3s;
    transition-property: transform;
    z-index: -1;
}
.hvr-bubble-float-left:hover::before, .hvr-bubble-float-left:focus::before, .hvr-bubble-float-left:active::before {
    transform: translateX(-10px);
}
.hvr-bubble-float-left:hover, .hvr-bubble-float-left:focus, .hvr-bubble-float-left:active {
    transform: translateX(10px);
}

See the live demo at https://jsfiddle.net/mani_123/neb7ycdr/show/ 

I have attached the full code packet at the bottom