h1.challenge-title Button
h2.challenge-subtitle #28ComponentsOfFebruraryDay1
<p class="challenge-part-of">Part of <a href="https://codepen.io/collection/DQRePJ" target="_blank">28 Components of February</a> collection.</p>

.container
	section.btn-type-section 
		h3.challenge-section-title Primary Buttons
		.btn-container
			button.btn.btn-sm Button
			button.btn Button
			button.btn.btn-lg Button

	section.btn-type-section 
		h3.challenge-section-title Secondary Buttons
		.btn-container
			button.btn.btn-secondary.btn-sm Button
			button.btn.btn-secondary Button
			button.btn.btn-secondary.btn-lg Button

	section.btn-type-section 
		h3.challenge-section-title Default Buttons
		.btn-container
			button.btn.btn-default.btn-sm Button
			button.btn.btn-default Button
			button.btn.btn-default.btn-lg Button

	section.btn-type-section 
		h3.challenge-section-title Round Buttons
		.btn-container
			button.btn.btn-round.btn-sm Button
			button.btn.btn-round Button
			button.btn.btn-round.btn-lg Button

	section.btn-type-section 
		h3.challenge-section-title Circle Buttons
		.btn-container
			button.btn.btn-circle.btn-sm 
				i.fa.fa-plus
			button.btn.btn-circle
				i.fa.fa-plus   
			button.btn.btn-circle.btn-lg 
				i.fa.fa-plus
			
	section.btn-type-section 
		h3.challenge-section-title Disabled Buttons
		.btn-container
			button.btn.btn-sm(disabled="disabled") Button
			button.btn(disabled="disabled") Button
			button.btn.btn-lg(disabled="disabled") Button

	section.btn-type-section 
		h3.challenge-section-title Primary Buttons with icons [left]
		.btn-container
			button.btn.btn-icon-left.btn-sm 
				i.fa.fa-share-alt
				| Button
			button.btn.btn-icon-left 
				i.fa.fa-share-alt
				| Button
			button.btn.btn-icon-left.btn-lg 
				i.fa.fa-share-alt
				| Button
				
	section.btn-type-section 
		h3.challenge-section-title Primary Buttons with icons [right]
		.btn-container
			button.btn.btn-icon-right.btn-sm 
				| Button
				i.fa.fa-share-alt
			button.btn.btn-icon-right
				| Button
				i.fa.fa-share-alt
			button.btn.btn-icon-right.btn-lg
				| Button
				i.fa.fa-share-alt
			
	section.btn-type-section 
		h3.challenge-section-title Loading Buttons
		.btn-container
			button.btn.btn-icon-left.btn-sm.upload
				i.fa.fa-arrow-up   
				| Button
			button.btn.btn-icon-left.upload
				i.fa.fa-arrow-up   
				| Button
			button.btn.btn-icon-left.btn-lg.upload
				i.fa.fa-arrow-up  
				| Button
View Compiled
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

$primary: #4ea8de;
$secondary: lighten($primary, 35%);
$default: #ced4da;

* {
	box-sizing: border-box;
}

html {
	font-size: 16px;
}

body {
	display: flex;
	padding: 0;
	margin: 0;
	align-items: center;
	flex-direction: column;
	min-height: 100vh;
	font-family: 'Noto Sans JP', sans-serif;
}

.challenge-title {
	text-align: center;
	padding: 0;
	margin: 1rem 0 0;
}

.challenge-subtitle {
	text-align: center;
	margin: 0;
	font-size: 1.125rem;
	font-weight: normal;
	color: darken($default,10%);
}

.challenge-part-of {
	text-align: center;
	margin: 1rem 0 0;
	font-size: 0.875rem;
	color: darken($default,10%);
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	a,
	a:visited {
		color: darken($default,10%);
		text-decoration-style: wavy;
		&:hover,
		&:active {
			color: lighten(darken($default,10%), 10%);
		}
	}
}

.container {
	width: 1000px;
	padding: 1rem;
	display: flex;
	flex-wrap: wrap;
}

.btn-type-section {
	flex: 0 0 300px;
	padding: .5rem;
	margin-right: 25px;
	margin-bottom: 12px;
	&:nth-of-type(3n){
		margin: 0;
	}
}

.challenge-section-title {
	font-weight: 400;
	text-transform: uppercase;
	margin: 1.5rem 0 1rem;
}

.btn-container {
	display: flex;
	align-items: center;
	> button:not(:last-of-type) {
		margin-right: 1rem;
	}
}

.btn {
	display: flex;
	align-items: center;
	background-color: $primary;
	border: 0;
	color: white;
	padding: 0.875rem 1rem;
	font-size: 1rem;
	border-radius: 0.25rem;
	border: 1px solid $primary;
	transition: background-color .1s ease-in;
	cursor: pointer;
	&:hover {
		background-color: lighten($primary, 5%);
	}
	&:active {
		background-color: darken($primary, 5%);
	}
	&:focus {
  	outline: 1px dotted darken($primary, 20%);
	}
	&[disabled="disabled"]{
		color: $default;
		background-color: lighten($default, 12%);
		border-color: lighten($default, 12%);
		cursor: not-allowed;
	}
	&.btn-sm {
		font-size: 0.875rem;
		padding: 0.5rem 0.875rem;
	}
	&.btn-lg {
		font-size: 1.125rem;
		padding: 1rem 1.5rem;
	}
	&.btn-secondary {
		background-color: $secondary;
		color: darken($secondary, 40%);
		border-color: darken($secondary, 40%);
		&:hover {
			background-color: darken($secondary, 5%);
		}
		&:active {
			background-color: darken($secondary, 10%);
		}
	}
	&.btn-default {
		background-color: lighten($default,40%);
		color: darken($default, 20%);
		border-color: $default;
		&:hover {
			background-color: darken(lighten($default,40%), 5%);
		}
		&:active {
			background-color: darken(lighten($default,40%), 10%);
		}
	}
	&.btn-loading {
		pointer-events: none;
		background-color: darken($primary, 5%);
		color: darken(white, 5%);
	}
	&.btn-sm.btn-round {
		border-radius: 17px;
	}
	&.btn-round {
		border-radius: 24px;
	}
	&.btn-lg.btn-round {
		border-radius: 26px;
	}
	&.btn-sm.btn-circle {
		width: 2.125rem;
		height: 2.125rem;
	}
	&.btn-circle {
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 3rem;
		height: 3rem;
	}
	&.btn-lg.btn-circle {
		width: 3.375rem;
		height: 3.375rem;
	}
	&.btn-icon-left > i {
		margin-right: .5rem;
	}
	&.btn-icon-right > i {
		margin-left: .5rem;
	}
}
View Compiled
const buttonList = document.querySelectorAll('.upload')

function uploadMock(e) {
	e.preventDefault()
	const icon = this.querySelector('.fa');
	icon.classList.remove('fa-arrow-up');
	icon.classList.add('fa-cog', 'fa-spin');
	this.classList.add('btn-loading');
	setTimeout(() => {
		icon.classList.remove('fa-cog', 'fa-spin');
		icon.classList.add('fa-arrow-up');
		this.classList.remove('btn-loading');
	}, 1500)
}

for(const button of buttonList) {
	button.addEventListener('click', uploadMock)
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.