CSS Fiddle Page

This is a CSS-animated content serving page that grabs your public fiddles and displays them alongside a menu

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">

		<div class="row">
			<div class="col">
				<input type="checkbox" class="btn-check" id="outline-btn">
				<label class="btn btn-outline-primary" for="outline-btn">Outline only</label>
			</div>
			<div class="col">
				<input type="checkbox" class="btn-check" id="red-btn">
				<label class="btn btn-red" for="red-btn">Red only</label>
			</div>
      			<div class="col">
				<input type="checkbox" class="btn-check" id="red-outline-btn">
				<label class="btn btn-outline-primary btn-red" for="red-outline-btn">Red+Outline</label>
			</div>

</div>

CSS

.btn-red {
    	border-color: #d67272 !important;
    	color: #d67272 !important;
	}
	.btn-red:hover, .btn-red:active, .btn-red + .btn-check:checked {
    	border-color: #d67272 !important;
    	background-color: #d67272 !important;
    	color: #ffffff !important;
	}