SCSS Buttons (styles and mixins) --- version 3243532442.242 or something.

index.html

<header class="demo">
<!-- 	<h1>SCSS Button Styles and Mixins</h1> -->
	<h1>SCSS Buttons </h1>
	<p>{ Style & Mixins }</p>
	
</header>
<main id="demo">
	<section>
		<ul class="button-list">
			<li><button>Primary</button></li>
			<li><button class="secondary">Secondary</button></li>
			<li><button class="outline">Outline</button></li>
			<li><button class="text-only">Text Only</button></li>
		</ul>
	</section>
</main>

<footer class="demo">
	<button id="floating-button">Round Corners on/off</button>
</footer>

script.js

$(document).ready(function() {
	
	// Variables // -----------------------------------------------------
	var floatingButton = $("#floating-button");
	let floatingButtonIsOn = false;
	var buttons = $("button");
	
	// Functions // -----------------------------------------------------
	function updateCorners() {
		buttons.toggleClass("rounded");
		if (floatingButtonIsOn === true) {
			floatingButton.text("Round Corners: OFF");
			floatingButtonIsOn = false;
		} else {
			floatingButton.text("Round Corners: ON");
			floatingButtonIsOn = true;
		}
	}
	function updateStateValue() {
		if (floatingButtonIsOn === true) {
			floatingButtonIsOn = false;
			updateCorners();
		} else {
			floatingButtonIsOn = true;
			updateCorners();
		}
	}
	
	// Main Script Runtime // -------------------------------------------
	floatingButton.on("click", function(e) {
		updateCorners();
		$(this).toggleClass('on');
	});
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

scss-buttons-styles-and-mixins-version-3243532442-242-or-something.markdown

SCSS Buttons (styles and mixins) --- version 3243532442.242 or something.

A Pen by Matthew Daniel Brown on CodePen.

License.

style.scss

// Variables
//=========================================================//
$system-font						: -apple-system, system-ui, 
																				BlinkMacSystemFont,"Segoe UI", 
																				"Roboto", "Helvetica Neue", 
																				Arial, sans-serif;
$primary-color				: #6200ea										!default;
$secondary-color		: #263238										!default;
$base-font-size			: 18px 												!default;
$button-font-size	: $base-font-size 	!default;
$button-font						: $system-font 				!default;

// Functions
//=========================================================//
@function focusColor($originalColor: $primary-color) {
	@return darken($originalColor, 5%);
}
@function hoverColor($originalColor: $primary-color) {
	@return darken($originalColor, 10%);
}
@function activeColor($originalColor: $primary-color) {
	@return darken($originalColor, 20%);
}

// Mixins
//=========================================================//
@mixin button($basecolor: $primary-color,$style: solid,$block: false) {
	// "Generate" (or 'Get') Adjusted Colors For Interaction States
	$_hover-color: hoverColor($basecolor);
	$_focus-color: focusColor($basecolor);
	$_active-color: activeColor($basecolor);
	// All the normal, default stuff ....
	letter-spacing: 1px;
	font-family: $button-font;
	font-weight: 600;
	font-size: $button-font-size;
	appearance: none !important;
	-webkit-tap-highlight-color: rgba($basecolor, 0) !important;
	transition: all 100ms linear;
	backface-visibility: hidden;
	transform: scale3d(1, 1, 1);
	line-height: 2.5 !important;
	cursor: pointer;
	text-wrap: nowrap !important;
	line-break: not-allowed !important;
	user-select: none !important;
	border-radius: 3px;
	text-decoration: none !important; // Important for links!
	
	// ... If it's a BLOCK button ...
	@if ($block == true) {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	} @else {
		margin: 1em 1em 1em 0;
		padding: 0 2em;
		//margin : 1em;
		min-width: 10em;
		//height : 48px;
		display: inline-block;
	}
	// ... If it's an OUTLINE button ...
	@if ($style == outline) {
		background: transparent;
		color: $basecolor;
		border: $basecolor solid 2px;
		&:focus {
			background: rgba($basecolor, 0.1);
			color: $_focus-color;
			border-color: $_focus-color;
			outline: rgba($_focus-color, 0.25) solid 4px;
			outline-offset: 2px;
		}
		&:hover {
			// background: transparent;
			background: rgba($basecolor, 0.15);
			color: $_hover-color;
			border-color: $_hover-color;
		}
		&:active {
			// background: transparent;
			background: rgba($basecolor, 0.3);
			// background: $_active-color;
			border-color: $_active-color;
			color: $_active-color;
		}
	} @else {
		background: $basecolor;
		border: $basecolor solid 2px;
		color: white;
		&:focus {
			background: $_focus-color;
			border-color: $_focus-color;
			outline: rgba($_focus-color, 0.25) solid 4px;
			outline-offset: 2px;
		}
		&:hover {
			background: $_hover-color;
			border-color: $_hover-color;
		}
		&:active {
			background: $_active-color;
			border-color: $_active-color;
		}
	}
	
	// Minor vertical type spacing adjustment hack
	padding-top: 1px !important;
	// Additional, optional transform during `:ACTIVE` state
	&:active {
		// transform: scale3d(0.98, 0.98, 0.98);
		// transition-duration: 0 !important;
		transform: translate3d(0, 4px, 0);
	}
	// [ONLY FOR DEMO]:
	// Temporarily disable all OUTLINE styles
	outline: none !important;
}

// Styles
//=========================================================//
//  ~ General, default, and ALL buttons
button, .button {
	@include button();
	&.rounded { border-radius: 50px !important; }
}
//  ~ Types of buttons; Specific styles
.secondary {
	@include button($basecolor: $secondary-color);
}
.text-only {
	@include button($style: outline);
	background: transparent;
	border-color: transparent !important;
}
.outline {
	@include button($style: outline);
}
.button-list {
	list-style: none !important;
	width: 100%;
	margin: 0 auto 2em auto;
	padding: 1em 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	align-content: center;
	justify-content: space-between;
	flex-wrap: wrap;
	@media (min-width: 900px) {
		flex-wrap: nowrap;
	}
	transition: all 300ms;
	transition-delay: 300ms;
	li {
		list-style: none !important;
		margin: auto;
		margin-bottom: 1em;
		text-align: center;
		transition: all 300ms;
		transition-delay: 300ms;
		@media (max-width: 480px) {
			width: 100% !important;
			display: block !important;
			padding: 0 !important;
			margin: 0.5em 0 !important;
		}
		@media (min-width: 480px) {
			display: inline-block;
			// margin-right: 1em;
			margin: 1em 0.5em 1em 0;
			width: auto !important;
		}
		button {
			width: 100% !important;
			margin: 0 auto !important;
			width: 100% !important;
			@media (min-width: 480px) {
			}
		}
	}
}


//////////////////////////////////////////////////////////////
								//	STYLES SPECIFICALLY, ONLY FOR THIS DEMO //
//////////////////////////////////////////////////////////////
html,
body {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	justify-content: center;
	background: whitesmoke;
}
main#demo {
	padding: 4em;
	margin-left: auto;
	margin-right: auto;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	justify-content: center;
	@media (min-width: 900px) {
		padding: 0 !important;
	}
}
.demo {
	font-family: $system-font !important;
	h1 {
		font-size: 1.5em;
		font-weight: 500;
		letter-spacing: 1px;
		color: darkgray;
		line-height: 1.5;
		margin: 0 auto;
	}
}
header.demo {
	p {
		color: darkgray;
		// font-weight: 300;
		text-transform: uppercase;
		letter-spacing: 3px;
		font-size: small;
	}
	background: darken(whitesmoke, 3%);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 2em 1em;
	width: 100%;
	text-align: center;
	margin: auto;
	z-index: 100;
}
footer.demo {
	background: darken(whitesmoke, 3%);
	position: absolute;
	// top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.5em 1em;
	width: 100%;
}

html {
	box-sizing: border-box;
	font-size: 18px;
	min-height: 100%;
}
*,
*:before,
*:after {
	box-sizing: inherit;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: $system-font;
}
body {
	font-size: 1em;
	min-height: 100%;
}

#floating-button {
	// position: absolute !important;
	// bottom: 1em !important;
	// left: 1em !important;
	// z-index: 1000 !important;
	@include button($style: outline, $basecolor: $secondary-color);
	font-size: small !important;
	min-width: auto !important;
	width: auto !important;
	letter-spacing: normal !important;
	padding: 0 1em !important;
	&.on {
		@include button($basecolor: #00e676);
	}
}