Button by BurgiSimon
#e8e8e8
1.button { 2 cursor: pointer; 3 padding: 10px 20px; 4 font-size: 16px; 5 color: black; 6 border: 2px solid rgba(255, 255, 255, 0.6); 7 border-radius: 5px; 8 outline: none; 9 box-shadow: 0 6px 7px rgba(0, 0, 0, 0.1), 10 inset 0 2px 4px rgba(255, 255, 255, 0.5); /* Hinzufügen eines inneren Schattens für Tiefe */ 11 backdrop-filter: blur(12px) saturate(180%); 12 -webkit-backdrop-filter: blur(12px) saturate(180%); 13 position: relative; 14 overflow: hidden; 15 background-color: rgba(255, 255, 255, 0.5); 16 transition: box-shadow 0.4s ease, transform 0.4s ease; 17 background-image: linear-gradient( 18 to top, 19 rgba(206, 255, 255, 0.75), 20 rgba(216, 255, 244, 0.65) 21 ); 22 background-repeat: no-repeat; 23 background-position: center bottom; 24 background-size: 100% 0%; 25} 26 27.button:hover { 28 box-shadow: 0 7px 9px rgba(0, 0, 0, 0.15), 29 inset 0 3px 5px rgba(255, 255, 255, 0.6); 30} 31 32@keyframes fillButtonAndPress { 33 0% { 34 background-size: 100% 0%; 35 transform: translateY(0); 36 border: 2px solid rgba(255, 255, 255, 0.6); 37 } 38 100% { 39 background-size: 100% 100%; 40 transform: translateY(2px); 41 border: 1px solid rgba(205, 235, 218, 0.6); 42 } 43} 44 45.button:active { 46 animation: fillButtonAndPress 0.4s ease forwards; 47 box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2), 48 inset 0 2px 4px rgba(255, 255, 255, 0.7); 49} 50 51.font { 52 font-family: sans-serif; 53 font-optical-sizing: auto; 54 font-weight: 200; 55 font-style: normal; 56} 57
243 views
243 views
MIT License