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:CSS-Button-01.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">
  <link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>wartungsfreundlicher Button</title>
<style>
button { 
  padding: .4em .8em; 
  background: #5a9900 linear-gradient(#8db243, #5a9900); 
  border: thin solid green;
  border-radius: 0 0.4em 0.4em 0.4em; 
  box-shadow: 0 .2em 0.4em gray; 
  color: white;
  text-shadow: 0 -.05em .05em #333; 
  font-size: 125%; 
  line-height: 1.5;
}

#hinweis {
    border-left: thick solid #c32e04;
    padding-left: 0.5em;
}
</style>

</head>

<body>
<h1>Ein wartungsfreundlicher Button</h1>

<button>
weiter
</button>

<p>Dieser Button wurde mit CSS gestaltet. Dabei wurden für die einzelnen Festlegungen Werte mit relativen Längenmaßen verwendet. Bei einer Änderung der Schriftgröße skaliert er automatisch mit und muss so bei einer späteren Änderung des Designs nicht überarbeitet werden.</p> 

<p id="hinweis">Beachten Sie, dass durch die CSS-Festlegungen die Default-Einstellungen für :focus und :hover deaktiviert wurden. Dies wird im nächsten Schritt berücksichtigt!</p>
</body>

</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-Button-01.html&oldid=80303“