JSFiddle - React, Tailwind, and code Playground

by Sebastian Brosch

HTML

<button>Example<span class="full-circle"></span></button>

CSS

button {
    background:#fff;
    border:1px solid #1588cb;
    border-radius:10px;
    box-sizing:content-box;
    color:#1588cb;
    font-size:1em;
    font-weight:400;
    height:60px;
    margin:25px 0 50px;
    position:relative;
    width:300px;
  
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
  
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -o-box-sizing: content-box; 
}
.full-circle {
    background:#fff;
    border:1px solid #1588cb;
    border-radius:50%;
    bottom:-17px;
    box-sizing:content-box;
    display:block;
    height:41px;
    left:50%;
    margin-left:-22px;
    position:absolute;
    width:45px;
 
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    -o-box-sizing:content-box;
}
.full-circle:before {
    background:#fff;
    content:'+';
    height:26px;
    left:-1px;
    line-height:53px;
    position:absolute;
    top:-1px;
    width:47px;
}
button:hover, 
button:hover > span, 
button:hover > .full-circle:before {
    background:green;
    color:white
}