Beispiel:Button-4.html
Aus SELFHTML-Wiki
<!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;
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;
}
.actions button {
flex: 1;
}
.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;
}
h1 {
line-height: 1.2;
}
</style>
</head>
<body>
<header>
<a id="backlink" href="/"></a>
<p>Schreinerei Meier</p>
<p>Ihre Werkstatt für gutes Wohnen!</p>
</header>
<nav>
<ul>
<li><a tabindex="0" aria-current="page">Startseite</a></li>
<li><a href="./Beispiel:Preise-4.html">Unsere Preise</a></li>
<li><a href="./Beispiel:Inhalt-4.html">Bilder von unseren Produkten</a></li>
</ul>
</nav>
<h1>Willkommen bei der Schreinerei Meier im Internet!</h1>
<div class="actions">
<button class="btn btn-primary">🛒 zum Warenkorb </button>
<button class="btn btn-secondary">für später merken</button>
<button class="btn btn-ghost"><span style="color:var(--danger);">❤</span> Wunschzettel</button>
</div>
<h2 style="text-align: center; color: black;">Sehen Sie sich unsere Auswahl an:</h2>
<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>
