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 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