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
This Pen doesn't use any external JavaScript resources.