CSS - Button Glas-Effekte

Hier werden von mir einmal erstellte Button-Effekte gesammelt, damit diese nicht verloren gehen Für die Beschriftung der Buttons verwende ich transparente Grafiken.

meinung.png
42 x 15 Pixel
121 Byte
unten.png
23 x 15 Pixel
105 Byte
oben.png
23 x 15 Pixel
110 Byte
ok.png
42 x 15 Pixel
169 Byte

<style>
.button1 {
 cursor: Pointer;
 padding: 0.4rem;
 vertical-align: bottom;
 border-radius: 0.2rem;
 border: Solid 1px #FFFFFF;
 margin-top: 5px;
 margin-right: 5px;
 transition: all 0.5s;
}
.button1:hover {
 box-shadow: inset 0px -5px 12px #FFFFFF;
}
</style>

<div class="box">
<img src="meinung.png" class="button1">
<img src="unten.png" class="button1">
<img src="oben.png" class="button1">
<img src="ok.png" class="button1">
</div>

<style>
.button2 {
 cursor: Pointer;
 padding: 0.4rem;
 vertical-align: bottom;
 border-radius: 0.2rem;
 border: Solid 1px #FFFFFF;
 margin-top: 5px;
 margin-right: 5px;
 box-shadow: inset 0px 0px 7px #FFFFFF;
}
.button2:hover {
 animation:button2Animation 0.2s both running;
}

@keyframes button2Animation {
 0% {
  box-shadow: inset 0px 0px 0px #FFFFFF;
 }
 25% {
  box-shadow: inset 0px -3px 1px #FFFFFF;
 }
 50% {
  box-shadow: inset 0px -6px 2px #FFFFFF;
 }
 75% {
  box-shadow: inset 0px -9px 4px #FFFFFF;
 }
 100% {
  box-shadow: inset 0px -12px 8px #FFFFFF;
 }
}
</style>

<div class="box">
<img src="meinung.png" class="button2">
<img src="unten.png" class="button2">
<img src="oben.png" class="button2">
<img src="ok.png" class="button2">
</div>

<style>
.button3 {
 cursor: Pointer;
 padding: 0.4rem;
 vertical-align: bottom;
 border-radius: 0.2rem;
 border: Solid 1px #FFFFFF;
 margin-top: 5px;
 margin-right: 5px;
 background: radial-gradient(ellipse, #FFFFFF 0%, #B4CCE2);
}
.button3:hover {
 animation:button3Animation 0.3s both running;
}

@keyframes button3Animation {
 0% {
 background: radial-gradient(ellipse, #FFFFFF 0%, #B4CCE2);
 }
 25% {
 background: radial-gradient(ellipse, #FFFFFF 10%, #B4CCE2);
 }
 50% {
 background: radial-gradient(ellipse, #FFFFFF 20%, #B4CCE2);
 }
 75% {
 background: radial-gradient(ellipse, #FFFFFF 30%, #B4CCE2);
 }
 100% {
 background: radial-gradient(ellipse, #FFFFFF 40%, #B4CCE2);
 }
}
</style>

<div class="box">
<img src="meinung.png" class="button3">
<img src="unten.png" class="button3">
<img src="oben.png" class="button3">
<img src="ok.png" class="button3">
</div>


<style>
.button4 {
 cursor: Pointer;
 padding: 0.4rem;
 vertical-align: bottom;
 border-radius: 0.2rem;
 border: Solid 1px #FFFFFF;
 margin-top: 5px;
 margin-right: 5px;
 background: linear-gradient(to right, #FFFFFF 5%, #508ABE);
}
.button4:hover {
 animation:button4Animation 0.3s both running;
}

@keyframes button4Animation {
 0% {
 background: linear-gradient(to right, #FFFFFF 5%, #508ABE);
 }
 25% {
 background: linear-gradient(to right, #FFFFFF 18%, #508ABE);
 }
 50% {
 background: linear-gradient(to right, #FFFFFF 29%, #508ABE);
 }
 75% {
 background: linear-gradient(to right, #FFFFFF 41%, #508ABE);
 }
 100% {
 background: linear-gradient(to right, #FFFFFF 53%, #508ABE);
 }
}
</style>

<div class="box">
<img src="meinung.png" class="button4">
<img src="unten.png" class="button4">
<img src="oben.png" class="button4">
<img src="ok.png" class="button4">
</div>

<style>
.button5 {
 cursor: Pointer;
 padding: 0.4rem;
 vertical-align: bottom;
 border-radius: 0.2rem;
 border: Solid 1px #FFFFFF;
 margin-top: 5px;
 margin-right: 5px;
 background: radial-gradient(circle closest-side, #FFFFFF 0%, #B4CCE2);
}
.button5:hover {
 animation:button5Animation 0.3s both running;
}

@keyframes button5Animation {
 0% {
 background: radial-gradient(circle closest-side, #FFFFFF 0%, #B4CCE2);
 }
 25% {
 background: radial-gradient(circle closest-side, #FFFFFF 20%, #B4CCE2);
 }
 50% {
 background: radial-gradient(circle closest-side, #FFFFFF 40%, #B4CCE2);
 }
 75% {
 background: radial-gradient(circle closest-side, #FFFFFF 60%, #B4CCE2);
 }
 100% {
 background: radial-gradient(circle closest-side, #FFFFFF 80%, #B4CCE2);
 }
}
</style>

<div class="box">
<img src="meinung.png" class="button5">
<img src="unten.png" class="button5">
<img src="oben.png" class="button5">
<img src="ok.png" class="button5">
</div>

<style>
.button6 {
 cursor: Pointer;
 padding: 0.4rem;
 vertical-align: bottom;
 border-radius: 0.2rem;
 border: Solid 1px #FFFFFF;
 margin-top: 5px;
 margin-right: 5px;
 background: repeating-radial-gradient(#FFFFFF 10%, #B4CCE2);
}
.button6:hover {
 animation:button6Animation 0.3s both running;
}

@keyframes button6Animation {
 0% {
 background: repeating-radial-gradient(#FFFFFF 20%, #B4CCE2);
 }
 25% {
 background: repeating-radial-gradient(#FFFFFF 30%, #B4CCE2);
 }
 50% {
 background: repeating-radial-gradient(#FFFFFF 40%, #B4CCE2);
 }
 75% {
 background: repeating-radial-gradient(#FFFFFF 50%, #B4CCE2);
 }
 100% {
 background: repeating-radial-gradient(#FFFFFF 60%, #B4CCE2);
 }
}
</style>

<div class="box">
<img src="meinung.png" class="button6">
<img src="unten.png" class="button6">
<img src="oben.png" class="button6">
<img src="ok.png" class="button6">
</div>

<style>
.button7 {
 cursor: Pointer;
 padding: 0.4rem;
 vertical-align: bottom;
 border-radius: 0.2rem;
 border: Solid 1px #FFFFFF;
 margin-top: 5px;
 margin-right: 5px;
 background: repeating-linear-gradient(45deg,#FFFFFF 50%, transparent);
}
.button7:hover {
 animation:button7Animation 0.4s both running;
}

@keyframes button7Animation {
 0% {
 background: repeating-linear-gradient(45deg,#FFFFFF 50%, transparent);
 }
 25% {
 background: repeating-linear-gradient(45deg,#FFFFFF 40%, transparent);
 }
 50% {
 background: repeating-linear-gradient(45deg,#FFFFFF 30%, transparent);
 }
 75% {
 background: repeating-linear-gradient(45deg,#FFFFFF 20%, transparent);
 }
 100% {
 background: repeating-linear-gradient(45deg,#FFFFFF 0%, transparent);
 }
}
</style>

<div class="box">
<img src="meinung.png" class="button7">
<img src="unten.png" class="button7">
<img src="oben.png" class="button7">
<img src="ok.png" class="button7">
</div>

<style>
div#bild {
width: 444px;
height: 207px;
margin: Auto;
background: url(bild.png)
}

div#bilda {
width: 444px;
height: 207px;
margin: Auto;
background:repeating-linear-gradient(45deg,rgba(255,255,255,0.4) 50%, transparent);
}
div#bilda:hover {
 animation:bildAnimation 0.4s both running;
}

@keyframes bildAnimation {
 0% {
 background: repeating-linear-gradient(45deg,rgba(255,255,255,0.4) 50%, transparent);
 }
 25% {
 background: repeating-linear-gradient(55deg,rgba(255,255,255,0.4) 40%, transparent);
 }
 50% {
 background: repeating-linear-gradient(65deg,rgba(255,255,255,0.4) 30%, transparent);
 }
 75% {
 background: repeating-linear-gradient(65deg,rgba(255,255,255,0.4) 20%, transparent);
 }
 100% {
 background: repeating-linear-gradient(85deg,rgba(255,255,255,0.4) 0%, transparent);
 }
}
</style>

<div id="bild"><div id="bilda"></div></div>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<small> Physische Auszeichnung

CSS - Hintergrundbild mit Zoom Funktion

PHP - Element aus einem Array entfernen

JavaScript - Interne Anker hervorheben

MySQL - Die 10 neusten Einträge einer Tabelle anzeigen

100% Text
Eine Seite sollte nicht nur mit 100% Text gefüllt sein. Lockern Sie die Seite auf zum Beispiel mit verschieden großen Absätzen, farbigen Überschriften, Bildern und Hyperlinks. Vom großen Vorteil ist, wenn der Text nicht über die ganze Browserseite geht. Mit Tabellen können Sie die Textbreite leicht begrenzen => bessere Lesbarkeit und Übersicht.