CSS Speech Bubble Icon

Just a couple spans.

Speech bubble icons have become synonymous with comments. When creating yet another one for a standard comment link, it occurred to me that there might be a way to make the icon without ever opening up an image editor. It could all be done with CSS. After all, a word bubble is only two shapes a rounded rectangle and a triangle. For it to work, I just needed to add a couple tags inside the comment link.

The flexibility provided with CSS is the principle benefit of using this design pattern. Changing the color and size of the icon can all be done my modifying a couple lines of the stylesheet. No getting your hands dirty fixing pixels in the image editor.

All dimension values are set with Em’s, so you can adjust the size of the entire link and icon by changing the first font-size value.

The IE clause

Since Internet Explorer 6 and 7 does not support the RGBa color schema, the bottom half of the point element will not be transparent. Be sure to modify the CSS to match the background color.

This design pattern is released under a Creative Commons By License. You are free to share and remix this work

Several different flavors

This post has 23 Comments as of today.

This post has 23 Comments as of today.

This post has 23 Comments as of today.

This post has 23 Comments as of today.

This post has 23 Comments as of today.

This post has 23 Comments as of today.

This post has 23 Comments as of today.

Get the CSS

Format: 
/**** Speech Bubble Icons *****/
.spch-bub-inside,
.spch-bub-outside {
  position: relative;
}
a.spch-bub-inside,
a.spch-bub-outside {
  color: #00F;
  text-decoration: none;
}
.spch-bub-inside em,
.spch-bub-outside em {
  font-style: normal;
}
.spch-bub-inside em {
  background: #00F;
  color: #FFF;
  padding: 0 0.4em;
  -moz-border-radius: 0.25em;
  -webkit-border-radius: 0.25em;
  border-radius: 0.25em;
  position: relative;
}
.spch-bub-inside .point,
.spch-bub-outside .point {
  width: 0;
  height: 0;
  position: absolute;
  top: 1.1em;
  left: 0.4em;
  display: block;
  border-left: 0.45em solid #00F; 
  border-bottom: 0.45em solid #FFF; /* IE fix */
  border-bottom: 0.45em solid rgba(0,0,0,0); 
  overflow: hidden; /* IE fix */
}
.spch-bub-outside {
 padding-left: 2.0em;
}
.spch-bub-outside .bubble {
  top: 0;
  left: 0;
  display: block;
  position: absolute;
  height: 1.1em;
  width: 1.8em;
  background: #00F;
  -moz-border-radius: 0.25em;
  -webkit-border-radius: 0.25em;
  border-radius: 0.25em;
}
a.spch-bub-inside:hover,
a.spch-bub-outside:hover {
  color: #F00;
}
a.spch-bub-inside:hover em,
a.spch-bub-outside:hover .bubble  {
  cursor: pointer;
  background: #F00;
  color: #FF0;
}
a.spch-bub-inside:hover .point,
a.spch-bub-outside:hover .point {
  border-left: 0.5em solid #F00; 
}
div.spch-bub-outside {
  height: 1.5em;
  width: 0;
}

/**** Speech Bubble Icons *****/
.spch-bub-inside {
  position: relative;
}
a.spch-bub-inside {
  color: #00F;
  text-decoration: none;
}
.spch-bub-inside em {
  font-style: normal;
}
.spch-bub-inside em {
  background: #00F;
  color: #FFF;
  padding: 0 0.4em;
  -moz-border-radius: 0.25em;
  -webkit-border-radius: 0.25em;
  border-radius: 0.25em;
  position: relative;
}
.spch-bub-inside .point {
  width: 0;
  height: 0;
  position: absolute;
  top: 1.1em;
  left: 0.4em;
  display: block;
  border-left: 0.45em solid #00F; 
  border-bottom: 0.45em solid #FFF; /* IE fix */
  border-bottom: 0.45em solid rgba(0,0,0,0); 
  overflow: hidden; /* IE fix */
}
a.spch-bub-inside:hover {
  color: #F00;
}
a.spch-bub-inside:hover em {
  cursor: pointer;
  background: #F00;
  color: #FF0;
}
a.spch-bub-inside:hover .point {
  border-left: 0.5em solid #F00; 
}

/**** Speech Bubble Icons *****/
.spch-bub-outside {
  position: relative;
}
a.spch-bub-outside {
  color: #00F;
  text-decoration: none;
}
.spch-bub-outside em {
  font-style: normal;
}
.spch-bub-outside .point {
  width: 0;
  height: 0;
  position: absolute;
  top: 1.1em;
  left: 0.4em;
  display: block;
  border-left: 0.45em solid #00F; 
  border-bottom: 0.45em solid #FFF; /* IE fix */
  border-bottom: 0.45em solid rgba(0,0,0,0); 
  overflow: hidden; /* IE fix */
}
.spch-bub-outside {
 padding-left: 2.0em;
}
.spch-bub-outside .bubble {
  top: 0;
  left: 0;
  display: block;
  position: absolute;
  height: 1.1em;
  width: 1.8em;
  background: #00F;
  -moz-border-radius: 0.25em;
  -webkit-border-radius: 0.25em;
  border-radius: 0.25em;
}
a.spch-bub-outside:hover {
  color: #F00;
}
a.spch-bub-outside:hover .bubble  {
  cursor: pointer;
  background: #F00;
  color: #FF0;
}
a.spch-bub-outside:hover .point {
  border-left: 0.5em solid #F00; 
}

/**** Speech Bubble Icons *****/
.spch-bub-outside {
  position: relative;
}
.spch-bub-outside .point {
  width: 0;
  height: 0;
  position: absolute;
  top: 1.1em;
  left: 0.4em;
  display: block;
  border-left: 0.45em solid #00F; 
  border-bottom: 0.45em solid #FFF; /* IE fix */
  border-bottom: 0.45em solid rgba(0,0,0,0); 
  overflow: hidden; /* IE fix */
}
.spch-bub-outside {
 padding-left: 2.0em;
}
.spch-bub-outside .bubble {
  top: 0;
  left: 0;
  display: block;
  position: absolute;
  height: 1.1em;
  width: 1.8em;
  background: #00F;
  -moz-border-radius: 0.25em;
  -webkit-border-radius: 0.25em;
  border-radius: 0.25em;
}
div.spch-bub-outside {
  height: 1.5em;
  width: 0;
}

Get the HTML

Link, number inside bubble

This post has 23 Comments as of today. 

<p>
	This post has 
	<a class="spch-bub-inside" href="#">
		<span class="point"></span>  
		<em>23</em>
	</a>
	Comments as of today.
</p>

Link, number inside bubble, word outside

This post has 23 Comments as of today. 

<p>
	This post has 
	<a class="spch-bub-inside" href="#">
		<span class="point"></span>  
		<em>23</em>
		Comments
	</a>
	as of today.
</p>

Link, number and word inside bubble

This post has 23 Comments as of today. 

<p>
	This post has 
	<a class="spch-bub-inside" href="#">
		<span class="point"></span>  
		<em>23 Comments</em>
	</a>
	 as of today.
</p>

Bubble outside, number and word linked

This post has 23 Comments as of today. 

<p>
	This post has 
	<a class="spch-bub-outside" href="#">
		<span class="point"></span>
		<span class="bubble"></span>
		23 Comments
	</a>
	as of today.
</p>

Bubble outside, number linked

This post has 23 Comments as of today. 

<p>
	This post has 
	<a class="spch-bub-outside" href="#">
		<span class="point"></span>
		<span class="bubble"></span>
		23 
	</a>
	Comments as of today.
</p>

Bubble outside, no number or word linked

This post has 23 Comments as of today. 

<p>
	This post has 
	<a class="spch-bub-outside" href="#">
		<span class="point"></span>
		<span class="bubble"></span>
	</a>
	23 Comments as of today.
</p>

Icon as a bullet

This post has 23 Comments as of today. 

<p class="spch-bub-outside">
	<span class="point"></span>
	<span class="bubble"></span>
	This post has 23 Comments as of today.
</p>

Just the icon in a <div>

<div class="spch-bub-outside">
	<span class="point"></span>
	<span class="bubble"></span>
</div>