html - 添加 CSS 圆圈 - 裁剪圆圈的上半部分

Question

我的网站上有以下按钮: http://jsfiddle.net/32u5x5uf/

我首先想将跨度圆移到主按钮的中心。然后我想是否可以在 CSS 中以某种方式将这两个形状“合并”在一起。所以基本上移除圆的上半部分和穿过圆中间的主条。

.full-circle {
 border: 2px solid #1588CB;
 height: 35px;
 width: 35px;
 -moz-border-radius:30px;
 -webkit-border-radius: 30px;
 position:absolute;
bottom:-20px;
}

button {
background:#ffffff;
border-radius: 10px; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border: 2px solid #1588CB;
color:#1588CB;
font-weight:400;
height:200px;
width:400px;
position:relative;
}

<button>Learn More
    <span class="full-circle">+</span>
</button>

Answer 1

.full-circle {
 border: 2px solid #1588CB;
 height: 35px;
 width: 35px;
-moz-border-radius:30px;
-webkit-border-radius: 30px;
 position:absolute;
 bottom:-20px;
}

button {
background:#ffffff;
border-radius: 10px; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border: 2px solid #1588CB;
color:#1588CB;
font-weight:400;
height:200px;
width:400px;
position:relative;
}

/* overides ... */
.full-circle {
  border-radius: 0 0 30px 30px;
  border-top: none;
  height: 17px;
  background: #FFF;
  left: 50%;
  margin-left: -17px;
  bottom: -19px;
  line-height: 0;
}

<button>Learn More
    <span class="full-circle">+</span>
</button>