Button by adamgiebl
#212121
1/* Inspired by twitter.com/marina_uiux */ 2 3.button { 4 font-size: 17px; 5 border-radius: 12px; 6 background: linear-gradient(180deg, rgb(56, 56, 56) 0%, rgb(36, 36, 36) 66%, rgb(41, 41, 41) 100%); 7 color: rgb(218, 218, 218); 8 border: none; 9 padding: 2px; 10 font-weight: 700; 11 cursor: pointer; 12 position: relative; 13 overflow: hidden; 14} 15 16.button span { 17 border-radius: 10px; 18 padding: 0.8em 1.3em; 19 padding-right: 1.2em; 20 text-shadow: 0px 0px 20px #4b4b4b; 21 width: 100%; 22 display: flex; 23 align-items: center; 24 gap: 12px; 25 color: inherit; 26 transition: all 0.3s; 27 background-color: rgb(29, 29, 29); 28 background-image: radial-gradient(at 95% 89%, rgb(15, 15, 15) 0px, transparent 50%), radial-gradient(at 0% 100%, rgb(17, 17, 17) 0px, transparent 50%), radial-gradient(at 0% 0%, rgb(29, 29, 29) 0px, transparent 50%); 29} 30 31.button:hover span { 32 background-color: rgb(26, 25, 25); 33} 34 35.button-overlay { 36 position: absolute; 37 inset: 0; 38 pointer-events: none; 39 background: repeating-conic-gradient(rgb(48, 47, 47) 0.0000001%, rgb(51, 51, 51) 0.000104%) 60% 60%/600% 600%; 40 filter: opacity(10%) contrast(105%); 41 -webkit-filter: opacity(10%) contrast(105%); 42} 43 44.button svg { 45 width: 15px; 46 height: 15px; 47}
9.9K views
9.9K views
MIT License