diedVIPs

html knowhow

Buttons stylen










Buttons stylen
So sieht´s aus




Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
.button {background-color: #4CAF50; border: none; color: white; margin:30px; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px;}
.button:hover {background-color: #4CAF50; color: white;}
.button1 {background-color: #4CAF50;font-size: 10px;padding: 10px 24px;border-radius: 2px;}
.button2 {background-color: #008CBA;font-size: 12px;padding: 12px 28px;border-radius: 4px;}
.button3 {background-color: #f44336;transition-duration: 0.4s;font-size: 14px;padding: 14px 40px;border-radius: 10px;box-shadow: 5px 5px 15px yellow;}
.button4 {background-color: #e7e7e7; color: black;font-size: 16px;padding: 32px 16px;border-radius: 15px;box-shadow: 6px 6px 10px hsla(300,15%,25%,0.3) inset;}
.button5 {background-color: #555555;font-size: 18px;padding: 16px;border-radius: 45px;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);}
</style>
<head>

<body >
<center>
<button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</center>
</body>

</html>







Kontakt    Datenschutz   Impressum