SCSS
// Color palette
$laRioja: #B4C307;
$lemon: #F6F107;
$lightGrey: #D6D6D6;
$snuff: #E7DEE7;
$tangerineYellow: #FED10A;
$whisper: #E5E5E5;
// Component colors
$color-body: $snuff;
$color-button: $whisper;
$color-border-off: $lightGrey;
$color-border-on: $laRioja;
$color-divot: $whisper;
$color-light-off: $lightGrey;
$color-light-on: $lemon;
// Set box sizing on all elements
* {
box-sizing: border-box;
}
// Body
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(to bottom right, $color-body 0%, lighten($color-body, 10%) 20%, $color-body 100%);
box-shadow: inset rgba(black, 0.1) -50px -50px 200px 12px;
}
// Set z-index
input, label {
z-index: 2;
}
.the-darkness {
z-index: 1;
}
// Label
label {
position: relative;
width: 225px;
height: 90px;
background-color: darken($color-button, 5%);
border: 3px solid $color-border-off;
border-radius: 100px;
box-shadow:
inset rgba(white, .35) -4px 14px 36px 0,
inset rgba(black, .05) 4px -10px 36px 0,
rgba(black, .05) 0 0 24px 6px;
cursor: pointer;
transition:
border-color 2s ease-out,
box-shadow 2s ease-out,
transform 0.1s ease-out;
&:before,
&:after {
content: "";
position: absolute;
top: 0; bottom: 0;
margin: auto;
border-radius: 100px;
}
&:before {
left: 36px;
width: 9px;
height: 9px;
background-color: $color-light-off;
box-shadow: inset rgba(black, .08) 2px 1px 0 0;
transition: background-color 2s ease-out;
}
&:after {
right: 24px;
width: 40px;
height: 40px;
background-color: $color-divot;
box-shadow:
inset rgba(black, .12) 2px 20px 20px -12px,
inset rgba(white, .4) -4px -4px 12px 0,
rgba(black, .1) 0 4px 8px -6px;
}
}
// Input states
input {
visibility: hidden;
&:checked + label {
background-color: $color-button;
border-color: $color-border-on;
box-shadow:
inset rgba(white, .35) -4px 14px 36px 0,
inset rgba(black, .05) 4px -10px 36px 0,
rgba($color-border-on, 0.6) 0 0 30px -4px;
transform: scale(0.99);
transition:
border-color 0.2s ease-out,
box-shadow 2s ease-out,
transform 0.1s ease-out;
&:before {
background-color: $color-light-on;
box-shadow: rgba($color-light-on, 0.4) 0 0 6px 6px;
transition: background-color 0.2s ease-out;
}
}
&:active + label {
transform: scale(0.98);
}
}
// Dim background
.the-darkness {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
background-color: rgba(black, 0.4);
box-shadow: inset rgba(black, 0.6) 0 0 300px;
transition: opacity 0.5s ease-out;
}
// Remove the darkness
input:checked ~ div {
opacity: 0;
transition: opacity 0.2s ease-out;
}
