<button class="plastic">
<p>Plastic button</p>
</button>
/* Plastic button styles */
button.plastic {
color: var(--color-on-primary);
/* Background fallback */
background: var(--color-primary);
background: linear-gradient(-45deg, hsla(0, 0%, 100%, 0.04), var(--color-primary));
/* Set glass like border */
border: hsla(0, 0%, 0%, 0.2) 1px solid;
/* Make corners round btw. 50% won't work as expected */
border-radius: 999px;
filter: brightness(1.03);
/* remove blue highligt on mobile chromium browsers */
-webkit-tap-highlight-color: transparent;
/* Add shadows */
--indent: 0.2rem;
box-shadow: calc(-1 * var(--indent)) calc(-1 * var(--indent)) calc(2.5 * var(--indent)) hsla(0, 0%, 100%, 0.14),
var(--indent) var(--indent) calc(2.5 * var(--indent)) hsla(0, 0%, 0%, 0.1);
&:hover, &:focus {
filter: brightness(1.06)
}
&:active {
padding: 1.05em 2em 1em 2em;
filter: brightness(0.96);
box-shadow: inset var(--indent) var(--indent) calc(2.5 * var(--indent)) hsla(0, 0%, 0%, 0.1),
inset calc(-1 * var(--indent)) calc(-1 * var(--indent)) calc(2.5 * var(--indent)) hsla(0, 0%, 100%, 0.14);
& > p {
transform: scale(0.97);
}
}
}
/* Plastic button dark mode styles */
@media (prefers-color-scheme: dark) {
button.plastic {
border: hsla(0, 0%, 100%, 0.2) 1px solid;
background: linear-gradient(135deg, hsla(0, 0%, 100%, 0.04), var(--color-primary));
box-shadow: calc(-1 * var(--indent)) calc(-1 * var(--indent)) calc(2 * var(--indent)) hsla(0, 0%, 100%, 0.08),
var(--indent) var(--indent) calc(2 * var(--indent)) hsla(0, 0%, 0%, 0.21);
filter: brightness(1.02);
&:hover, &:focus {
filter: brightness(1.08)
}
&:active {
filter: brightness(0.96);
box-shadow: inset var(--indent) var(--indent) calc(2.5 * var(--indent)) hsla(0, 0%, 0%, 0.21),
inset calc(-1 * var(--indent)) calc(-1 * var(--indent)) calc(2.5 * var(--indent)) hsla(0, 0%, 100%, 0.08);
}
}
}
/* Generic button styles */
button {
font-family: 'Work Sans', sans-serif;
font-size: calc(1rem + 1.5vmin);
padding: 1em 2em 1.05em 2em;
white-space: nowrap;
cursor: pointer;
/* Don't forget about keyboard only styles */
&:focus-visible {
/* Add simple outline */
outline: 2px var(--color-on-primary) solid;
outline-offset: 0.5rem;
}
/* Improve redability in dark mode */
@media (prefers-color-scheme: dark) {
font-weight: 500;
}
}
/* Setup color variables */
:root {
color-scheme: dark light;
/* Light mode colors */
--color-background: hsl(4, 7%, 70%);
--color-primary: hsl(4, 9%, 72%);
--color-on-primary: hsl(4, 85%, 2%);
/* Dark mode colors */
@media (prefers-color-scheme: dark) {
--color-background: hsl(4, 4%, 18%);
--color-primary: hsl(4, 6%, 16%);
--color-on-primary: hsl(4, 9%, 86%);
}
}
/* Import Work Sans font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500&display=swap');
/* 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.