circle nub

by sberube

HTML

<div class="node">
        <div class="inner-circle"></div>
        <div class="circle-nub-right"></div>
      
    </div>




    <div class="node node-2 node-selected">
        <div class="inner-circle"></div>
        <div class="circle-nub-right"></div>
       
    </div>

CSS

.node{
    background-color: white;
    height:62px;
    width:62px;
    border-radius:31px;
    border:solid 1px #969696;
    display:block;
    box-shadow: 0px 0px 2px #a4a7a9, 0px 3px 5px #bcc0c2;
}
/* .node:before{
    content:"";
    width: 12px;
    height: 12px;
    display: block;
    border:solid 1px #969696;
    position: relative;
    background: white;
    left: -8px;
    top: 22px;
    border-radius: 6px;
        box-shadow: 0px 0px 2px #a4a7a9, 0px 3px 5px #bcc0c2;
} */
.node:after{
    content:"";
    width: 12px;
    height: 12px;
    display: block;
    border:solid 1px #969696;
    position: relative;
    background: white;
    left: 55px;
    top: -45px;
    border-radius: 6px;
        box-shadow: 0px 0px 2px #a4a7a9, 0px 3px 5px #bcc0c2;
}
.inner-circle{
    position:relative;
    background-color:white;
    height:62px;
    width:62px;
    z-index:1;
    border-radius:30px;
    top:0px;
    left:0px;
}
.circle-nub-right{
     position:relative;
    background-color:#969696;
    height:8px;
    width:8px;
    z-index:1;
    border-radius:30px;
    top:-34px;
    left:58px;
}
/* .circle-nub-left{
     position:relative;
    background-color:#969696;
    height:8px;
    width:8px;
    z-index:1;
    border-radius:30px;
    top:-59px;
    left:-5px;
} */
.node-2{
    position:absolute;
    top:200px;
    left:100px;
}
.node-selected{
    border:solid 1px #0096d6;
}
.node-selected:after{
    border:solid 1px #0096d6;
}