JSFiddle - React, Tailwind, and code Playground

by Alireza Safian

HTML

<form id="form1" runat="server">
    <div>
        <br />
        <br />
        <div style="text-align: center;">
            <label class="button">
                <input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span><span class="text">Add Details</span></label>
            <label class="button">
                <input type="radio" name="button" /> <span class="outer"><span class="inner"></span></span><span class="text">Choice 2</span></label>
            <br />
            <br />
            <br />
            <br />
        </div>
        <br />
    </div>
</form>

CSS

.button {
    background: #cfe7fa;
    background: -moz-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cfe7fa), color-stop(100%, #6393c1));
    background: -webkit-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
    background: -o-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
    background: -ms-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
    background: linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
    border: 1px solid #6393c1;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
    -webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
    cursor: pointer;
    display: inline-block;
    font: 10px Arial, Verdana, Geneva, sans-serif;
    line-height: 3px;
    padding-right: 5px;
}
.button:hover .inner {
    opacity:.5;
}
.button input {
    display:none;
}
.button input:checked + .outer .inner {
    opacity:1;
}
.button .outer {
    background:#2989d8;
    background:-moz-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
    background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #2989d8), color-stop(99%, #101354));
    background:-webkit-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
    background:-o-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
    background:-ms-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
    background:radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
    border:1px solid black;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    height:10px;
    margin:5px;
    width:10px;
}
.button .inner {
    background:#e4f5fc;
   ...