diedVIPs

html knowhow

Rund um Buttons










Wenn Sie eine Website mit vielen Seiten haben, möchten Sie möglicherweise jeder Seite eine Art Nummerierung hinzufügen.

Das

So sieht´s aus




Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
.button {border: none;color: white;padding: 16px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;transition-duration: 0.4s;cursor: pointer;}
.button1 {background-color: white;color: black;border: 2px solid #4CAF50;}
.button1:hover {background-color: #4CAF50;color: white;}
.button2 {background-color: white;color: black;border: 2px solid #008CBA;}
.button2:hover {background-color: #008CBA;color: white;}
</style>
<head>

<body >
<button class="button button1">Grün</button>
<button class="button button2">Blau</button>
</body>

</html>



Drucken mit Button

Irgenwas
So sieht´s aus

Print
Quellcode
<html>
<head>
Hier nichts

<style type="text/css">Kein Eintrag</style>
</head>

<body>
<a href="javascript:self.print()"><img src="Bilder/print.png" alt="Print" style="width: auto; height: 60%" border="0px" /></a>
</body>
</html>


Downloaden mit Button

Irgenwas
So sieht´s aus

Download Button
 
Quellcode
<html>
<head>
Hier nichts

<style type="text/css">Hier nichts</style>
</head>

<body >
<a href="Bilder/download2.png" download>
<img src="Bilder/download2.png" style="border-style: none; border-width: 2px; border-color: inherit;" style="border: 2px" alt="Download Button" class="auto-style23" width="10%" /></a>
</body>

</html>


Tagesdatum anzeigen

Das

So sieht´s aus




Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
.button {border: none;color: white;padding: 16px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;transition-duration: 0.4s;cursor: pointer;}
.button1 {background-color: white;color: black;border: 2px solid #4CAF50;}
.button1:hover {background-color: #4CAF50;color: white;}
.button2 {background-color: white;color: black;border: 2px solid #008CBA;}
.button2:hover {background-color: #008CBA;color: white;}
</style>
<head>

<body >
<button class="button button1">Grün</button>
<button class="button button2">Blau</button>
</body>

</html>



Add to Favorites

Das

So sieht´s aus




Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
.button {border: none;color: white;padding: 16px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;transition-duration: 0.4s;cursor: pointer;}
.button1 {background-color: white;color: black;border: 2px solid #4CAF50;}
.button1:hover {background-color: #4CAF50;color: white;}
.button2 {background-color: white;color: black;border: 2px solid #008CBA;}
.button2:hover {background-color: #008CBA;color: white;}
</style>
<head>

<body >
<button class="button button1">Grün</button>
<button class="button button2">Blau</button>
</body>

</html>









Kontakt    Datenschutz   Impressum