html - 2 つのボタン内に要素を挿入するにはどうすればよいですか?

Question

現在、私はこれを持っています：

<a href="" class="left">Get your prize</a>
<a href="" class="right">Live preview it</a>​

この：

a { display: block; float:left; padding:10px 30px; font-size:12px; color: white; text-decoration:none;}

.left { border-radius: 20px 0 0 20px;  background:lightgreen; }
.right { border-radius: 0 20px 20px 0; background:darkgreen; }

a:hover { background:red;}

jsFiddle は次のとおりです: http://jsfiddle.net/uKTFk/

ここに私の目標があります: http://i.imgur.com/AwLfn.png << 2 つの真ん中に「または」テキストの円を配置します。

もちろん、jsFiddle はまだ適切にスタイル設定されていません。後で、2 つの「ボタン」の間の「または」円の問題を解決するときに、それについて説明します。

ヘルプ？

Answer 1

このようなものが役立つはずです：

HTML:

<a href="" class="left">Get your prize</a>
<a href="" class="right">Live preview it</a>
<a href="" class="center">or</a>

CSS:

a { display: block; float:left; padding:10px 30px; font-size:12px; color: white; text-decoration:none;}

.left { border-radius: 20px 0 0 20px;  background:lightgreen; }
.right { border-radius: 0 20px 20px 0; background:darkgreen; }
.center { border-radius: 20px; background:red; height: 15px; width: 15px; 
position: absolute; left: 120px; padding:2px; margin-top: 7px}
a:hover { background:red;}

編集されたフィドル </p>

Answer 2

目標を達成する別の方法を次に示します (追加div):

http://jsfiddle.net/XU7Yq/