Beispiel:Button mit CSS-1.html
Aus SELFHTML-Wiki
<!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>Button-Gestaltung mit CSS</title>
<style>
button {
margin: 0 2em;
padding: .2em .5em;
}
#bt1 img {
margin-right: .2em;
}
#bt2 {
background-image: url(/images/2/29/Tick.png);
background-position: .5em center;
background-repeat: no-repeat;
padding-left: 2em;
}
#bt3 {
padding: .3em;
}
#bt3 span {
background-image: url(/images/2/29/Tick.png);
background-position: left center;
background-repeat: no-repeat;
padding-left: 1.75em;
}
</style>
</head>
<body>
<h1>Button-Gestaltung mit CSS</h1>
<main>
<h2>mit img-Element</h2>
<button id="bt1">
<img src="/images/2/29/Tick.png" alt=""> Speichern
</button>
<h2>mit Hintergrund-Grafik</h2>
<button id="bt2">
Speichern
</button>
<h2>mit zusätzlichem Element</h2>
<button id="bt3">
<span>Speichern</span>
</button>
</main>
</body>
</html>
