Menu Bubblegum

Hayoooo!!! Como vão todos vocês? Trago um menu super bonitinho!!!! Ele se chama Bubblegum, foi adaptado pelo blog Sweet Poison, então todos os créditos são para as meninas de lá viu? Espero que gostem!

Brevia do efeito

1. Em seu HMTL procure por:

]]></b:skin>

2. Achou agora acima dele adicione todo esse código:

Códigos

.bubblegum {

font-size: 12px; 

font-family:georgia;

color: #fff;

float:left;

padding:4px; 

text-align:center;

height:20px;

margin:2px;

background:#FF69B4;

width:25px;

box-shadow: 0 0 5px #fff;

border-radius:5px;

-webkit-border-bottom-right-radius: 45px;

-webkit-border-bottom-left-radius: 45px;

-moz-border-radius-bottomright: 45px;

-moz-border-radius-bottomleft: 45px;

border-bottom-right-radius: 45px;

border-bottom-left-radius: 45px;

filter: alpha(opacity=75);

moz-opacity:.80;

opacity:.80 ;

border-top: 3px solid #FF1493;

-webkit-transition-duration: .70s;

}

.bubblegum:hover {

color: #336666;

float:left;

padding:4px;

text-align:center;

height:55px;

margin:2px;

background:#AFEEEE;

width:25px;

box-shadow: 0 0 5px #fff;

border-radius:5px;

-webkit-border-bottom-right-radius: 45px;

-webkit-border-bottom-left-radius: 45px;

-moz-border-radius-bottomright: 45px;

-moz-border-radius-bottomleft: 45px;

border-bottom-right-radius: 45px;

border-bottom-left-radius: 45px;

filter: alpha(opacity=100);

moz-opacity:1.0;

opacity:1.0;

border-top: 7px solid #00BFFF;

-webkit-transition-duration: .70s;

}

3. Salve ele, e então vá para layout e adicione um gadget de HTML/Javascript e cole:

Códigos

<a href="URL 1" class="bubblegum">01</a>
<a href="URL 2" class="bubblegum">02</a>
<a href="URL 3" class="bubblegum">03</a>
<a href="URL 4" class="bubblegum">04</a>

Prontinho! Viu como e lindo?