Question

Currently I have this:

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

and this:

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;}

Here’s the jsFiddle: http://jsfiddle.net/uKTFk/

Here’s my goal: https://i.stack.imgur.com/9LGf1.png << to place the cirlce with “or” text in the middle of the two.

Of course the jsFiddle is not properly styled yet, I’ll go on to that later when I solve the problem with “or” circle between the two ‘buttons’.

Help?

Answer 1

Something like this should help:

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;}

Edited Fiddle
​