如何最好的代碼重疊HTML按鈕

Question

這裏是我想要做的事：

overlapping buttons http://dev.960design.com/98a5fad8-c3ed-4014-a732-15145a233b83.png

我喜歡紅色，藍色和綠色的區域是可點擊的鏈接，而不在HTML5網頁重疊。例如，如果我懸停鼠標或點擊藍色「B」圈的最右邊緣，我不希望綠色被點擊。我還希望讓鏈接之間的「空白」處於非活動狀態（懸停：當您將鼠標從紅色懸停到藍色到綠色時，指針會有點「閃爍」）。

我最初的想法：SVG按鈕。創建/實現svg按鈕沒有問題，但可點擊區域（viewbox？）正在導致我的問題。

那麼完成這個的最好方法是什麼？

這裏是我嘗試用SVG ...

<a href="#"> 
    <svg> 
    <path id="button-svg-right" d="M0,100 L100,100 L100,0 L0,0 C27.6142375,0 50,22.3857625 50,50 C50,77.6142375 27.6142375,100 0,100 L0,100 Z"></path> 
    </svg> 
</a> 

Answer 1

添加中央absolute白色<span>圈不是一個按鈕。
玩填充，邊界，直到你得到所需的大小。

.btns{ 
 
    position: relative; 
 
    height: 30px; 
 
} 
 
.btns button{ 
 
    cursor:pointer; 
 
    outline: none; 
 
    border:none; 
 
    height: inherit; 
 
    width: 50px; 
 
    color: #fff; 
 
    font-weight:bold; 
 
    font-size:24px; 
 
} 
 
.btns button:hover{ 
 
    opacity:0.7; 
 
} 
 
.btns > button:first-child{ 
 
    background: red; 
 
    padding-right:20px; 
 
} 
 
.btns > button:last-child{ 
 
    background: green; 
 
    padding-left:20px; 
 
} 
 
.btns span{ 
 
    left: 32px; 
 
    position: absolute; 
 
    z-index:1; 
 
    width: 30px; 
 
    height: inherit; 
 
    border-radius: 50%; 
 
    background: #fff; 
 
    border: 5px solid #fff; margin-top:-5px; 
 
} 
 
.btns span button{ 
 
    width: inherit; border-radius: inherit; 
 
    background: blue; 
 
}

<span class="btns"> 
 
    <button>-</button> 
 
    <span> 
 
    <button>B</button> 
 
    </span> 
 
    <button>+</button> 
 
</span>