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.
|
42 x 15 Pixel 121 Byte |
23 x 15 Pixel 105 Byte |
23 x 15 Pixel 110 Byte |
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
Eine zufällige Auswahl von „Bausteinen” (Snippets) aus den Bereichen CSS, PHP, JavaScript und MySQL.
CSS - Wasserzeicheneffekt - Hintergrundbild fixieren
PHP - Verzeichnisgröße auslesen 2