Coder Wrap provides free to use snippets

body, html {
 background: #f0f7ff;
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100%;
 z-index: -1;
}

.yesno-radio {
 text-align: center;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 background: #fff;
 border-radius: 8px;
 position: relative;
 box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
 padding: 50px 20px;
 width: 400px;
}

.yesno-radio .btn {
 border: 3px solid #123e70;
 display: inline-block;
 padding: 10px;
 position: relative;
 text-align: center;
 transition: background 600ms ease, color 600ms ease;
 z-index: 1;
}

.yesno-radio input[type=radio].toggle {
 display: none;
}

.yesno-radio input[type=radio].toggle + label {
 cursor: pointer;
 min-width: 60px;
}

.yesno-radio input[type=radio].toggle + label:hover {
 background: none;
 color: #123e70;
}

.yesno-radio input[type=radio].toggle + label:after {
 background: #123e70;
 content: "";
 height: 100%;
 position: absolute;
 top: 0;
 transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
 width: 100%;
 z-index: -1;
}

.yesno-radio input[type=radio].toggle.toggle-left + label {
 border-right: 0;
}

.yesno-radio input[type=radio].toggle.toggle-left + label:after {
 left: 100%;
}

.yesno-radio input[type=radio].toggle.toggle-right + label {
 margin-left: -5px;
}

.yesno-radio input[type=radio].toggle.toggle-right + label:after {
 left: -100%;
}

.yesno-radio input[type=radio].toggle:checked + label {
 cursor: default;
 color: #fff;
 transition: color 200ms;
 position: relative;
 z-index: 2;
}

.yesno-radio input[type=radio].toggle:checked + label:after {
 left: 0;
}