SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.

Beispiel:HTML-Tut-button-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <title>Buttons mit CSS gestalten-1</title>
  <style>
  button {
    font-size: 1.2em;
    margin: 0 1em 1em 0;
    padding: 0.4em 1em;
  }
  .speichern {
    background: #ebf5d7;
    color:green;
    font-weight:bold;
  }
  .abbruch {
    background: #ffebe6;
    color:red;
    font-weight:bold;
  }

  .hinweis {
    color:red;
    font-weight:bold;
  }
.weiss {
    background:white;
}

button:focus,
button:hover {
 	box-shadow: 0 .3em 0.6em rgba(0, 0, 0, .8);  
 	background: #e6f2f7;
}
  </style>
</head>

<body>
  <h1>Das button-Element - viele Möglichkeiten zur Gestaltung</h1>

  <h2>Einsatz von HTML-Elementen</h2>
  span-Element mit Klasse: 
  <button type="button">Passwort <span class="hinweis">ändern!</span></button>

  <button type="button"><strong>Passwort</strong> <span class="hinweis">ändern!</span></button>

  <h2>Einbinden von Bildern</h2>
  <button type="button" class="speichern">✔ Speichern!</button>
  <button type="button" class="abbruch" >✘ Abbrechen!</button>

  <button type="button" class="hinweis weiss">
    <img src="http://wiki.selfhtml.org/images/8/8b/M%C3%BClleimer.png" alt=""> Löschen!
  </button>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:HTML-Tut-button-1.html&oldid=80307“