Button by bociKond
#e8e8e8
1.button { 2 --white: #e8e8e8; 3 --border-clr: #fff; 4 --button-bg-clr: #151515; 5 display: grid; 6 grid-template-rows: 80% 20%; 7 background-color: var(--button-bg-clr); 8 border-width: 10px 3px 3px 3px; 9 border-color: var(--border-clr); 10 border-style: solid; 11 font-family: sans-serif; 12 font-weight: bolder; 13 font-size: 1.5rem; 14 cursor: pointer; 15 transition: 350ms ease-in-out; 16} 17 18button:hover { 19 --border-clr: #f55c1b; 20 transform: translate(-7px, -7px); 21} 22 23button:hover .top::before { 24 filter: saturate(1); 25 opacity: 1; 26} 27 28button:hover .top::after { 29 opacity: 0; 30} 31 32.top { 33 color: var(--white); 34 /* background-color: white; */ 35 margin: 0.75rem 0.5rem; 36 padding: 0.5rem 2rem; 37 display: flex; 38 align-items: center; 39 justify-content: center; 40 position: relative; 41 isolation: isolate; 42 z-index: 1; 43} 44 45.top::before { 46 content: ""; 47 position: absolute; 48 inset: 0; 49 background: #f55c1b; 50 background: linear-gradient(0deg, #f55c1b 0%, #ffffff 100%); 51 filter: saturate(0); 52 z-index: -2; 53 transition: 350ms ease-in-out; 54 opacity: 0; 55} 56 57.top .before { 58 position: absolute; 59 inset: 2px; 60 z-index: -1; 61 background-color: var(--button-bg-clr); 62} 63 64.top::after { 65 content: ""; 66 position: absolute; 67 inset: 0px; 68 background: var(--button-bg-clr); 69 filter: saturate(0); 70 z-index: -1; 71 transition: 350ms ease-in-out; 72 border: 2px solid var(--white); 73 transition: 350ms ease-in-out; 74} 75 76.bottom { 77 background: repeating-conic-gradient( 78 from 45deg, 79 #616161 0% 25%, 80 #3f3f3f 0% 50% 81 ); 82 background-size: 16px 16px; 83 background-color: #3f3f3f; 84 background-position: center; 85 width: 100%; 86 height: 100%; 87}
424 views
424 views
MIT License