JSFiddle - React, Tailwind, and code Playground

HTML

<span class="s-d s-9 c-1"><span class="f"><i>da!</i></span></span>

CSS

.s-d {
    background-color: transparent;
    color: #000;
    cursor: pointer;
    display: inline-block;
    height: 60px;
    width: 60px;
    font: normal 600 12px arial, sans-serif, serif;
    position: relative;
    text-decoration: none;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
    visibility: hidden;
    border-radius: 50%;
}
.s-d:before {
    top: 1%;
    left: 28%;
    width: 45%;
    height: 100%;
    transform: rotate(-45deg);
    border-radius: 50%;
}
.s-d:after {
    top: 1%;
    right: 28%;
    width: 45%;
    height: 100%;
    transform: rotate(45deg);
    border-radius: 50%;
}
.s-d:before,
.s-d:after {
    content: "";
    background-color: inherit;
    display: block;
    position: absolute;
    z-index: 8;
}
[class^='s-'].s-9 {
    height: 62px;
    width: 62px;
    line-height: 58px;
}
[class^='s-'].s-9 .f {
    font-size: 18px;
    line-height: 56px;
}
[class^='s-'].c-1 {
    background-color: #009A47;
    box-shadow: 0px 0px 0px 1px #009A47;
    color: #009A47;
}
.s-d .f {
    background-color: inherit;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    font: inherit;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    line-height: inherit;
    visibility: hidden;
    border-radius: 50%;
    z-index: 10;
}
.s-d *,
.s-d:before,
.s-d:after,
.s-d .f:before,
.s-d .f:after {
    visibility: visible;
}
.s-d .f:before {
    top: 1%;
    left: 28%;
    width: 45%;
    height: 100%;
    transform: rotate(0deg);
    border-radius: 50%;
}
.s-d .f:after {
    top: 1%;
    right: 28%;
    width: 45%;
    height: 100%;
    transform: rotate(90deg);
    border-radius: 50%;
}
.s-d .f:before,
.s-d .f:after {
    content: "";
    background-color: inherit;
    display: block;
    position: absolute;
    z-index: -1;
}
.s-d i {
    color: inherit;
}
*, *:before, *:after {
    -webkit-box-sizing:...