Button by shadowmurphy
#e8e8e8
1.button { 2 overflow: hidden; 3 position: relative; 4 border: 1px solid #D1D1D1; 5 background-color: #F5F5F5; 6 width: 100px; 7 height: 30px; 8 user-select: none; 9 cursor: pointer; 10 border-radius: 5px; 11 transition: all 0.5s; 12 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 13 font-weight: bold; 14 display: flex; 15 justify-content: center; 16 align-items: center; 17 text-transform: uppercase; 18} 19 20.button:hover { 21 transform: scale(1.1); 22 background-color: #E8E8E8; 23 border-color: #BDBDBD; 24 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 25} 26 27.button:active { 28 transform: scale(0.95); 29 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 30} 31 32.button::before { 33 content: ""; 34 position: absolute; 35 top: 0; 36 left: 0; 37 width: 100%; 38 height: 100%; 39 background: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, 40 transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, 41 transparent 75%, transparent); 42 opacity: 0; 43 animation: buttonGlow 2s linear infinite; 44 z-index: -1; 45} 46 47@keyframes buttonGlow { 48 0% { 49 background-position: 0 0; 50 } 51 52 100% { 53 background-position: 400% 0; 54 } 55} 56
676 views
676 views
MIT License