Beispiel:Button-5.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS-Buttons</title> <style> form { max-width: 800px; height: 600px; box-sizing: border-box; font-family: sans-serif; color: white; background: url(/images/b/b5/Dj.jpg) darkblue; margin: 3em auto -1em; padding: 3em; border-radius: 0 1em 1em; } form h2 { color: white; } p.choice { margin-top: 6em; } button { position: relative; margin: 2em; padding: .5em 1em; width: 8em; background: transparent; color: white; border: thin solid white; border-radius: .2em; cursor: pointer; transition: all ease 2s; } button:hover, button:active { outline: none; background: white; color: darkblue; } button::before, button::after { position: absolute; width: 100%; height: 150px; left: 0; color: white; } button::before { content: " "; top: -120px; background: none center no-repeat transparent; background-size: 30px 30px; transition: all ease 1s; transform: rotate(0deg); } button:hover::before { background-size: 80px 80px; transform: rotate(360deg); } button::after { bottom: -520%; transition: transform ease-in .5s, opacity ease-out 1s; } #win::before { background-image: url(/images/2/29/Win.png); } #and::before { background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/3d/Tux_LinuxLibertineDG.svg); } #mac::before { background-image: url(/images/6/69/Mac.png); } #win::after { content: "10, 11, 12"; transform: translatex(-200%); opacity: 0; } #win:hover::after { transform: translatex(0); opacity: 1; } #and::after { content: "Mint 22"; transform: translatey(200px); opacity: 0; } #and:hover::after { transform: translatey(0); opacity: 1; } #mac::after { content: "iOS 18.6, iOS 26"; transform: translatex(200%); opacity: 0; transition: transform ease-in .5s, opacity ease-out 1s; } #mac:hover::after { transform: translatex(0); opacity: 1; } </style> </head> <body>
Button-Gestaltung mit CSS
<form>
Download
Hier können Sie unser Produkt herunterladen.
Wählen Sie Ihr Betriebssystem.
<button id="win">Windows</button> <button id="and">Linux</button> <button id="mac">Apple</button>
</form>
Bildquellen
Dieses Beispiel verwendet folgende Bilder:
- <a href="https://lorempixel.com/output/nightlife-q-c-800-600-5.jpg">https://lorempixel.com/output/nightlife-q-c-800-600-5.jpg</a>
- <a href="https://commons.wikimedia.org/wiki/File:Tux_LinuxLibertineDG.svg">https://commons.wikimedia.org/wiki/File:Tux_LinuxLibertineDG.svg</a>
- <a href="https://de.wikipedia.org/wiki/Datei:Apple_logo_black.svg">https://https://de.wikipedia.org/wiki/Datei:Apple_logo_black.svg</a>
- <a href="https://commons.wikimedia.org/wiki/File:Windows_logo_-_2012.svg">https://commons.wikimedia.org/wiki/File:Windows_logo_-_2012.svg</a>
</body> </html>
