Beispiel:Button-4.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="UTF-8" > <meta name="viewport" content="width=device-width, initial-scale=1.0" >
<title>SPOT CSS - 4</title>
<style>
:root {
--primary: oklch(0.96 0.03 78);
--primary-dark: oklch(0.55 0.13 48); /* SELF-Braun */
--secondary: oklch(0.70 0.10 120);
--danger: oklch(0.6 0.2 18);
--link-color: oklch(0.62 0.10 249);
--radius: .4em;
--spacing: 1rem;
--font: system-ui, sans-serif;
}
* {
box-sizing: border-box;
}
body {
max-width: 55em;
margin: 0 auto;
font-family: var(--font);
background: var(--primary);
color: var(--primary-dark);
line-height: 1.5;
padding: 0.5em;
}
.btn {
font-size: 1.1em;
background: rgb(255 255 255 /.2);
border-radius: 0 var(--radius) var(--radius);
padding: 0.9em 1.4em;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
transition: all .2s ease, color .2s ease;
backdrop-filter: blur(6px);
border: thin solid rgb(255 255 255 /.4);
}
.btn-primary {
--hue: var(--primary-dark);
}
.btn-secondary {
--hue: var(--secondary); border-color: oklch(0.5 0.1 120);
}
.btn-danger {
--hue: var(--danger); border-color: oklch(0.4 0.2 18);
}
.btn:hover, .btn:focus { background: color-mix(in oklch, white, var(--hue)); color: color-mix(in oklch, black, var(--hue)); --shadow-strength: 35%; box-shadow: 0 .25rem .5rem
color-mix(in oklch, var(--hue) var(--shadow-strength), transparent);
}
.btn-ghost {
--hue: var(--link-color);
}
.product {
position: relative; /* essential! */ display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem;
} .product img {
width: 100%; display: block;
border-radius: var(--radius);
}
.product .span3 {grid-column: 1 / -1;}
.actions {
position: sticky; overflow: auto; width: max-content; max-width: 100%; margin: 0 auto; top: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem;
padding: .6rem .9rem;
background: rgb(255 255 255 / 0.25); backdrop-filter: blur(10px) saturate(1.4);
border-radius: .8rem; border: 1px solid rgb(255 255 255 / 0.4);
box-shadow: 0 .3rem .8rem rgb(0 0 0 / .2);
z-index: 10;
}
.cart {
background: white; padding: var(--spacing);; border-radius: var(--radius); border: thin solid; display: grid; gap: 1rem;
}
.cart-item {
display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--spacing); border-bottom: thin solid;
}
footer {
margin-top: calc(2 * var(--spacing)); padding: var(--spacing); text-align: center; font-size: 1em; color: black;
}
header { height: 5em; padding: 0 1em; margin-bottom: 1em;
display: grid; grid-template-columns: 6em 1fr 1fr;
}
header p:first-of-type{
font-size: 2em; font-weight: bold; line-height: 1;
}
header p:last-of-type {
transform: rotate(-10deg); border: thin solid; padding: 0.5em; border-radius: 0.2em; align-self: end; max-width: 14em;
} header #backlink {
display:inline-block; text-shadow: none; color: transparent; background: url(https://src.selfhtml.org/kurse/html-einstieg/img/logo.svg); background-size: contain; background-repeat: no-repeat; width: 5em; height: 3em; margin-top: 1em;
}
</style>
</head> <body>
<header> <a id="backlink" href="/"></a>
Schreinerei Meier
Ihre Werkstatt für gutes Wohnen!
</header> <nav>
- <a tabindex="0" aria-current="page">Startseite</a>
- <a href="./Beispiel:Preise-4.html">Unsere Preise</a>
- <a href="./Beispiel:Inhalt-4.html">Bilder von unseren Produkten</a>
</nav>
Willkommen bei der Schreinerei Meier im Internet!
<button class="btn btn-primary">🛒 zum Warenkorb </button>
<button class="btn btn-secondary">für später merken</button>
<button class="btn btn-ghost">❤ Wunschzettel</button>
Sehen Sie sich unsere Auswahl an:
<main>
<section class="product"> <img src="https://wiki.selfhtml.org/images/d/dc/Rocking-chair.svg" alt="Schaukelstuhl aus rotem Kirschbaumholz; Shaker-Style">
<img src="https://wiki.selfhtml.org/images/3/3c/Chair.svg" alt="Stuhl aus Vollholz"> <img src="https://wiki.selfhtml.org/images/0/0f/Cabinet.svg" alt="Kommode mit 2 Türen in hellem Holz"> <img src="https://wiki.selfhtml.org/images/a/ad/Dresser.svg" alt="Kommode mit 6 Schubladen in hellem Holz"> <img src="https://wiki.selfhtml.org/images/d/dd/Filing-cabinet.svg" alt="Aktenschrank mit 2 Auszügen"> <img src="https://wiki.selfhtml.org/images/5/54/Table.svg" alt="Tisch mit einer Besteckschublade"> <img class="span3" src="https://wiki.selfhtml.org/images/7/74/Cupboard.svg" alt="Kleiderschrank, dreimal 2-türig, mit 4 Schubladen im Mittelteil"> <img class="span3" src="https://wiki.selfhtml.org/images/3/37/Desk.svg" alt="Schreibtisch mit Unterschrank"> </section>
</main>
<footer>
© 2025 SELFHTML
</footer>
</body> </html>
