michaelmcgurk michaelmcgurk - 4 months ago 21
HTML Question

Add CSS circle - crop top half of circle

I have the following button on my site:
http://jsfiddle.net/32u5x5uf/

I'd first like to move the span circle to be exactly in the center of the main button. I'd then like if I can somehow "merge" the two shapes together in CSS. So basically remove the top half of the circle and the main bar that cuts through the middle of the circle.



.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

.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>