<button class="simple">Simple button</button>
button.simple {
/* the button transition duration property */
--button-press-duration: 20ms;
/* the button transition delay property */
--button-pressed-duration: 10ms;
/* Optical alignment corection */
padding: 1em 2em 1.05em 2em;
/* remove blue highligt on mobile chromium browsers */
-webkit-tap-highlight-color: transparent;
/* Make corners round btw. 50% won't work as expected */
border-radius: 999px;
/* Add shadows */
box-shadow: 1px 1px 2px 0 hsla(0, 0%, 0%, 0.06), 3px 3px 4px 0 hsla(0, 0%, 0%, 0.08);
/* Make button stay pressed for a bit longer */
transition:
transform var(--button-press-duration) ease-in var(--button-pressed-duration),
box-shadow var(--button-press-duration) ease-in var(--button-pressed-duration);
transform-origin: bottom center;
}
button.simple:hover, button.simple:focus {
/* Let's create anticipation before the button press */
transform: translatey(-1px);
filter: brightness(1.06);
}
button.simple:active {
/* Make shadows bearly visible on press */
box-shadow: 0 0 1px 0 hsla(0, 0%, 0%, 0.06), 1px 1px 1px 0 hsla(0, 0%, 0%, 0.08);
transform: translatey(0.15em) scale(0.98);
transition:
transform var(--button-press-duration) ease-in,
box-shadow var(--button-press-duration) ease-in;
/* On touch screens make press transition faster */
@media (hover: none) and (pointer: coarse) {
transition:
transform calc(var(--button-press-duration) / 4) ease-in,
box-shadow calc(var(--button-press-duration) / 4) ease-in;
}
}
/* Generic button styles */
button {
font-family: 'Work Sans', sans-serif;
font-size: calc(1rem + 1.5vmin);
white-space: nowrap;
cursor: pointer;
border: none;
color: var(--color-on-primary);
background: var(--color-primary);
/* Don't forget about keyboard only styles */
&:focus-visible {
/* Add simple outline */
outline: 2px var(--color-primary) solid;
outline-offset: 0.5rem;
}
}
/* Make shadows stronger on dark background */
@media (prefers-color-scheme: dark) {
button.simple {
/* Make font bolder in dark mode */
font-weight: 500;
box-shadow: 1px 1px 2px 0 hsla(0, 0%, 0%, 0.12), 3px 3px 4px 0 hsla(0, 0%, 0%, 0.23);
}
button.simple:active {
box-shadow: 0 0 1px 0 hsla(0, 0%, 0%, 0.12), 1px 1px 1px 0 hsla(0, 0%, 0%, 0.23);
}
}
/* Import Work Sans font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500&display=swap');
/* Setup color variables */
:root {
color-scheme: dark light;
/* Light mode colors */
--color-background: hsl(4, 9%, 69%);
--color-primary: hsl(4, 80%, 60%);
--color-on-primary: hsl(4, 3%, 99%);
/* Dark mode colors */
@media (prefers-color-scheme: dark) {
--color-background: hsl(4, 12%, 16%);
--color-primary: hsl(4, 49%, 45%);
--color-on-primary: hsl(4, 3%, 99%);
}
}
/* Setup body */
body {
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
box-sizing: border-box;
background: var(--color-background);
}
@use postcss-preset-env(stage: 1, browsers: "last 2 versions");
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.