The idea was to generate badges for different types of users on the fly. Just by defining a new color. The solution is using an UTF-8 character for the corner: ◤ U+25E4

You can see the example page here:
CSS3-badges

1. Step: Use UTF-8

<meta charset="utf-8">

2. Step: The badge style

.badge {
  font-family: Arial,san-serif;
  font-size: 10px;
  line-height: 1em;
  padding: 0px 15px 0px 3px;
  text-transform: uppercase;
  border: 1px solid #ccc;
  color: #666666;
  position: relative;
  background: #f1f1f1;
}

.badge:before {
  content: '\25E4';
  width: 12px;
  height: 12px;
  display: block;
  background: #fff;
  position: absolute;
  right: -1px;
  bottom: -1px;
  font-size: 15px;
  line-height: 10px;
  color: #bdbdbd;
}

.badge:hover {
  color: #2D3441;
  cursor: pointer;
}

3. Step: The badge markup

<span class="badge" title="Default Badge">Default Badge</span>

For this kind of buttons no images are needed. It’s just CSS3 and text. All icons are taken from the UTF-8 encoding table. This provides the facility to change the icon color and size just with CSS font settings.

You can see the example page here:
CSS3_textbuttons.html

1. Step: Use UTF-8

<meta charset="utf-8">

2. Step: The button style

.button {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  line-height: 1.5em;
  height: 1.5em;
  border-radius: .75em;
  border: 1px solid #666;
  padding: 0 .5em;
  margin: 0 10px 10px 0;
  background: #7abcff;
  background: -moz-linear-gradient(top, hsla(210,100%,74%,1) 0%, hsla(210,91%,67%,1) 44%, hsla(210,84%,59%,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(210,100%,74%,1)), color-stop(44%,hsla(210,91%,67%,1)), color-stop(100%,hsla(210,84%,59%,1)));
  background: -webkit-linear-gradient(top, hsla(210,100%,74%,1) 0%,hsla(210,91%,67%,1) 44%,hsla(210,84%,59%,1) 100%);
  background: -o-linear-gradient(top, hsla(210,100%,74%,1) 0%,hsla(210,91%,67%,1) 44%,hsla(210,84%,59%,1) 100%);
  background: -ms-linear-gradient(top, hsla(210,100%,74%,1) 0%,hsla(210,91%,67%,1) 44%,hsla(210,84%,59%,1) 100%);
  background: linear-gradient(top, hsla(210,100%,74%,1) 0%,hsla(210,91%,67%,1) 44%,hsla(210,84%,59%,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 );
  text-shadow: 1px 1px 1px #666;
  box-shadow: 1px 1px 2px #666;
}
.button:hover {
  color: #eee;
  text-shadow: none;
}
.button:active, .button.current {
  color: #eee;
  text-shadow: none;
  box-shadow: none;
  -moz-box-shadow: none;
  background: #4096ee;
  background: -moz-linear-gradient(top, hsla(210,84%,59%,1) 0%, hsla(210,91%,67%,1) 56%, hsla(210,100%,74%,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(210,84%,59%,1)), color-stop(56%,hsla(210,91%,67%,1)), color-stop(100%,hsla(210,100%,74%,1)));
  background: -webkit-linear-gradient(top, hsla(210,84%,59%,1) 0%,hsla(210,91%,67%,1) 56%,hsla(210,100%,74%,1) 100%);
  background: -o-linear-gradient(top, hsla(210,84%,59%,1) 0%,hsla(210,91%,67%,1) 56%,hsla(210,100%,74%,1) 100%);
  background: -ms-linear-gradient(top, hsla(210,84%,59%,1) 0%,hsla(210,91%,67%,1) 56%,hsla(210,100%,74%,1) 100%);
  background: linear-gradient(top, hsla(210,84%,59%,1) 0%,hsla(210,91%,67%,1) 56%,hsla(210,100%,74%,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#7abcff',GradientType=0 );
}

For the gradient style the http://www.colorzilla.com/gradient-editor/ was used again.

3. Step: Add the icon

.button:before, .button:after {
  font-size: 1.125em;
}
.button:before {
  margin-right: 5px;
}
.button:after {
  margin-left: 5px;
}
.button.email:before {
   content: "\2709";
}

The :before or :after pseudo element is used to place the icon inside the button. The font-size makes it a little bit bigger and the margin seperates it from the other text. At last the content with the HEX code of the UTF-8 character is needed. Notice, that the HTML 4.0 character entities or the numerical HTML encoding of the Unicode character dosn’t work.

4. Step: The button markup

<a href="#" class="button email">Email</a>