Grupos Efeito redondo

• Descrição:

Como deixar os grupos com esses círculos redondos e a legenda do lado? 
Grata.

http://cupcakegraphics.forumeiros.com/

• Informações:

Painel de Controle Visualização Página inicial Geral

Código:

<table id="grupos">
      
      
         
         <tbody><tr>
            
            <td>
               
            </td>
            
            <td>
                <a href="http://testeszinhos.forovenezuela.net/u1" class="gb g1"><span class="tg">Staff</span></a><a href="http://testeszinhos.forovenezuela.net/g3-moderadores" class="gb g2"><span class="tg">Mods</span></a><a href="http://testeszinhos.forovenezuela.net/g4-code-makers" class="gb g3"><span class="tg">Codes</span></a><a href="http://testeszinhos.forovenezuela.net/g5-users" class="gb g4"><span class="tg">Users</span></a>
            </td>
            
         </tr>
         
      
      
   </tbody></table>

Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS

Código:

.gb {
display: inline-block;
float: up;
position: relative;
left: -60px;
height: 60px;
margin-left: 1px;
margin-right: 1px;
width: 60px;
border-radius: 120px;
}

#grupos .g1 {
background: #000000;
color: #000000;
}
#grupos .g2 {
background: #031634;
color: #000000;
}
#grupos .g3 {
background: #032f34;
color: #000000;
}
#grupos .g4 {
background: #33343b;
color: #000000;
}
element.style {
}
.tg {
display: none;
font-family: La Belle Aurore;
font-size: 26px;
right: -100px;
top: 75px;
margin-left: 3px;
position: absolute;
text-align: right;
width: 200px;
}
#grupos td .gb:hover .tg {
display: inline-block;
}