Button by SESelfMadeSystem
#e8e8e8
1.frutiger-button { 2 cursor: pointer; 3 position: relative; 4 padding: 2px; 5 border-radius: 6px; 6 border: 0; 7 text-shadow: 1px 1px #000a; 8 background: linear-gradient(#006caa, #00c3ff); 9 box-shadow: 0px 4px 6px 0px #0008; 10 transition: 0.3s all; 11} 12 13.frutiger-button:hover { 14 box-shadow: 0px 6px 12px 0px #0009; 15} 16 17.frutiger-button:active { 18 box-shadow: 0px 0px 0px 0px #0000; 19} 20 21.inner { 22 position: relative; 23 inset: 0px; 24 padding: 1em; 25 border-radius: 4px; 26 background: radial-gradient(circle at 50% 100%, #30f8f8 10%, #30f8f800 55%), 27 linear-gradient(#00526a, #009dcd); 28 overflow: hidden; 29 transition: inherit; 30} 31 32.inner::before { 33 content: ""; 34 position: absolute; 35 inset: 0; 36 background: linear-gradient(-65deg, #0000 40%, #fff7 50%, #0000 70%); 37 background-size: 200% 100%; 38 background-repeat: no-repeat; 39 animation: thing 3s ease infinite; 40} 41 42@keyframes thing { 43 0% { 44 background-position: 130%; 45 opacity: 1; 46 } 47 48 to { 49 background-position: -166%; 50 opacity: 0; 51 } 52} 53 54.top-white { 55 position: absolute; 56 border-radius: inherit; 57 inset: 0 -8em; 58 background: radial-gradient( 59 circle at 50% -270%, 60 #fff 45%, 61 #fff6 60%, 62 #fff0 60% 63 ); 64 transition: inherit; 65} 66 67.inner::after { 68 content: ""; 69 position: absolute; 70 inset: 0; 71 border-radius: inherit; 72 transition: inherit; 73 box-shadow: inset 0px 2px 8px -2px #0000; 74} 75 76.frutiger-button:active .inner::after { 77 box-shadow: inset 0px 2px 8px -2px #000a; 78} 79 80.text { 81 position: relative; 82 z-index: 1; 83 color: white; 84 font-weight: 550; 85 transition: inherit; 86} 87
835 views
MIT License