How to create google plus circle with mouseover effect?

Those of you who have seen google plus may know what Im taking about...

Essentially my problem is this. I would like to have a circle with radius for example of some number of pixels with text in the center. On mouseover, the outline of the circle expands by whatever it was plus 5. When I mouse out, the circle gradually shrinks back to its original size. If the text in the middle开发者_C百科 of the circle is clicked then an alert box of some sort pops up.

What is a good way to do this and how? Does it involve div tags?

Use CSS3 border-radius to create your circle and some JS to do the animations...or you could try to do them with CSS3 as well.

http://jsfiddle.net/DOSBeats/cE6Yb/

This version uses JS.

Here is the CSS code they use:

.eswd {
background: url("/images/experiments/nav_logo78.png") repeat scroll 0 -243px transparent;
}

.esw {
background-repeat: no-repeat;
border: 0 none;
cursor: pointer;
display: inline;
height: 15px;
margin-left: 5px;
overflow: hidden;
vertical-align: 6px;
width: 24px;
}

HTML:

<button g:pingback="/gen_204?atyp=i&amp;ct=plusone&amp;cad=S0" title="Recommend this page" g:undo="poS0" g:type="plusone" g:entity="http://anewyorkthing.com/" onmouseover="window.gbar&amp;&amp;gbar.pw&amp;&amp;gbar.pw.hvr(this,google.time())" onclick="window.gbar&amp;&amp;gbar.pw&amp;&amp;gbar.pw.clk(this)" class="esw eswd" style="" id="gbpwm_0"></button>