Beispiel:Button-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> 

 <meta charset="UTF-8" >
 <meta name="viewport" content="width=device-width, initial-scale=1.0" >

<title>SPOT CSS - 2</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;
   }

   body {

max-width: 55em; 

     margin: .8em auto;
     font-family: var(--font);
     background: var(--primary);
     color: var(--primary-dark);
     line-height: 1.5;
   }

   .btn {
     font-size: 1.1em;

color: white; background: var(--hue); border: thin solid var(--hue); 

     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;
 		--shadow-strength: 20%;

box-shadow: 0 .15rem .35rem 

 							  color-mix(in oklch, black var(--shadow-strength), transparent);			
     transition: all .2s ease, color .2s ease;
   }

   .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 {
     background: white;
     border-radius: var(--radius);
     padding: var(--spacing);

margin-bottom: var(--spacing); 

     display: grid;
     gap: 1em;
     border: thin solid;
   }
   @media (width > 40em) {
     .product {
     grid-template-columns: 1fr 2fr;
     }
   }		

   .product img {
     width: 100%;
     border-radius: var(--radius);
   }

   .actions {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
     margin-top: 1rem;
   }
   
   .actions button {
     flex: 1 0 7em;
   }

   .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: 5em 1fr 1fr;
     gap: .5em;
   }

   header #backlink {
     display:inline-block;
     text-shadow: none;
   }

   header p:first-of-type{
     margin-top: .5em;
     font-size: 2em;
     line-height: 1;
     font-weight: bold;
   }

   header p:last-of-type {
     transform: rotate(-10deg);
     border: thin solid;
     padding: 0.5em;
     border-radius: 0.2em;
     align-self: end;
     max-width: 16em;
   }	
 </style>

</head> <body> 

 <header>
   <a id="backlink" href="#"><img src="https://src.selfhtml.org/kurse/html-einstieg/img/logo.svg" alt="Logo"></a>

Schreinerei Meier

Ihre Werkstatt für gutes Wohnen!

 </header>
   
   <nav>
  • <a tabindex="0" aria-current="page">Startseite</a>
  • <a href="#">Unsere Preise</a>
  • <a href="#">Bilder von unseren Produkten</a>
   </nav>

Willkommen bei der Schreinerei Meier im Internet!

<main> 

 <section class="product">
   <img src="https://wiki.selfhtml.org/images/d/dc/Rocking-chair.svg" alt="Schaukelstuhl aus rotem Kirschbaumholz; Shaker-Style">

Schaukelstuhl

Hochwertiges Qualitätsprodukt, bequem und unkaputtbar, lebenslange Garantie 

     €999.00

       <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>

 </section>

 <section class="cart">

Warenkorb

     Schaukelstuhl
     <button class="btn btn-danger">Löschen</button>

   <button class="btn btn-primary" style="width:100%;">zur Kasse</button>
   <button class="btn btn-secondary" style="width:100%;">weiter einkaufen</button>
 </section>

</main>

<footer> 

 © 2025 SELFHTML

</footer>

</body> </html>

Abgerufen am 23.11.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:Button-2.html"