Button by SMSmit-Prajapati
#000000
1.button { 2 /* in scss with just one variable i can change opacity with rgba(variable, opacity) but in css it's not possible so i have used three seperate variables */ 3 /* with hue-rotate color can be changed */ 4 --main-color: rgb(46, 213, 115); 5 --main-bg-color: rgba(46, 213, 116, 0.36); 6 --pattern-color: rgba(46, 213, 116, 0.073); 7 8 /* change this rotation value */ 9 filter: hue-rotate(0deg); 10 11 cursor: pointer; 12 text-transform: uppercase; 13 letter-spacing: 0.5rem; 14 background: radial-gradient( 15 circle, 16 var(--main-bg-color) 0%, 17 rgba(0, 0, 0, 0) 95% 18 ), 19 linear-gradient(var(--pattern-color) 1px, transparent 1px), 20 linear-gradient(to right, var(--pattern-color) 1px, transparent 1px); 21 background-size: 22 cover, 23 15px 15px, 24 15px 15px; 25 background-position: 26 center center, 27 center center, 28 center center; 29 border-image: radial-gradient( 30 circle, 31 var(--main-color) 0%, 32 rgba(0, 0, 0, 0) 100% 33 ) 34 1; 35 border-width: 1px 0 1px 0; 36 color: var(--main-color); 37 padding: 1rem 3rem; 38 font-weight: 700; 39 font-size: 1.5rem; 40 transition: background-size 0.2s ease-in-out; 41} 42 43.button:hover { 44 background-size: 45 cover, 46 10px 10px, 47 10px 10px; 48} 49.button:active { 50 filter: hue-rotate(250deg); 51} 52
3K views
MIT License