Buton format din 2 parti

[Nsilviu]

Adica sa ma fac mai inteles vruiam sa fac un buton ex: Home cu link index.php si lipit de el in partea dreapta(stanga) un plus care cand dai pe el sa aiba link ad_fav.php?id=1...In fine deci un buton format din doua parti..
Eu am ceva dar are un singur link.

Cod: Selectaţi tot

.button
{       
   display: inline-block;
   white-space: nowrap;
   background-color: #ccc;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
   background-image: -webkit-linear-gradient(top, #eee, #ccc);
   background-image: -moz-linear-gradient(top, #eee, #ccc);
   background-image: -ms-linear-gradient(top, #eee, #ccc);
   background-image: -o-linear-gradient(top, #eee, #ccc);
   background-image: linear-gradient(top, #eee, #ccc);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
   border: 1px solid #777;
   padding: 0 1.5em;
   margin: 0.5em;
   font: bold 1em/2em Arial, Helvetica;
   text-decoration: none;
   color: #333;
   text-shadow: 0 1px 0 rgba(255,255,255,.8);
   -moz-border-radius: .2em;
   -webkit-border-radius: .2em;
   border-radius: .2em;
   -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
   -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
   box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.button:hover
{
   background-color: #ddd;       
   background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
   background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
   background-image: -moz-linear-gradient(top, #fafafa, #ddd);
   background-image: -ms-linear-gradient(top, #fafafa, #ddd);
   background-image: -o-linear-gradient(top, #fafafa, #ddd);
   background-image: linear-gradient(top, #fafafa, #ddd);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');       
}

.button:active
{
   -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
   -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
   box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
   position: relative;
   top: 1px;
}

.button:focus
{
   outline: 0;
   background: #fafafa;
}   

.button:before
{
   background: #ccc;
   background: rgba(0,0,0,.1);
   float: left;       
   width: 1em;
   text-align: center;
   font-size: 1.5em;
   margin: 0 1em 0 -1em;
   padding: 0 .2em;
   -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
   -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
   box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
   -moz-border-radius: .15em 0 0 .15em;
   -webkit-border-radius: .15em 0 0 .15em;
   border-radius: .15em 0 0 .15em;
        pointer-events: none;       
}

.play:before
{
   content: "\2b";
}

<a href="" class="button play">Button</a>


[ViezuREX]

Ca sa faci treaba asta exista doua variante:
1. Ar trebui sa ai fie 2 butoane lipite, care din punct de vedere al aspectului sa para unul singur, dar fiecare sa aiba alt link, deci doua elemente <A> 2. Sa definesti ambele elemente intr-un <A>, exact cum ai si acum, insa unul dintre ele sa fie controlat prin JavaScript (ex.

Cod: Selectaţi tot

<a href='index.php'>Home<span onclick='window.location="contact.php"' style='cursor: pointer'>+</span></a>

)