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.

<bdo> Textrichtung

CSS - Fehleingaben in Formularen farbig hervorheben

PHP - Ein kleiner PHP-Jahreskalender

JavaScript - Die Wahl einer Auswahlliste speichern und auslesen

MySQL - Benutzer ausgeben die min. 25 Tage registriert sind

Weg in 60 Sekunden!
Die erste Minute beim Besuch Ihrer Homepage ist die wichtigste. Es wird entschieden, ob der Besucher auf der Seite bleibt oder weiter surft. Zeigen Sie Ihrem Besucher, dass er genau Ihre Homepage braucht, um an seine Informationen zu kommen.
Fassen Sie Ihre Inhalte recht kurz (2 bis 3 Sätze), denn jeder Besucher möchte schnellstmöglich wissen, was Ihn erwartet.