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.

<caption> Tabellenüberschrift

CSS - Verschieben von Hintergründen

PHP - Mit range() und array_merge() Auswahllisten erstellen

JavaScript - Audiodatei in JavaScript verstecken

MySQL - Daten aus zwei DB-Tabellen auslesen