Radio button buttons

by Sybeus

HTML

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

    <!-- Custom CSS -->
    <style>
        .btn-radio {
            display: flex;
            align-items: center;
            padding: 0.75em 1em;
        }
        .btn-radio input[type="radio"] {
            margin-right: 0.75em;
            transform: scale(1.5);
            position: relative;
            top: -2px;
        }
        @media (min-width: 576px) {
            .btn-outline-primary {
                border: none !important;
                padding: 0.25em 0;
            }
        }
    </style>

    <title>Hello, world!</title>
</head>
<body>
<div class="container">
    <h1 class="mt-5">Hello, world!</h1>
    <form>
        <div class="mb-3">
            <label for="exampleRadios" class="form-label">Are you enjoying this demo?</label>
            <label class="btn btn-outline-primary btn-radio">
                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="yes"> Yes
            </label>
            <label class="btn btn-outline-primary btn-radio">
                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="no"> No
            </label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"...