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>