Button by roroland
This button was created for Button Mastery
#e8e8e8
1.button { 2 --radius: 20px; 3 --col0: 0, 0, 0; 4 --col1: 219, 161, 240; 5 --col2: 239, 214, 248; 6 --col3: 255, 255, 255; 7 --col4: 270, 153, 138; 8 --col5: 244, 164, 177; 9 --col6: 244, 136, 136; 10 --col7: 243, 136, 94; 11 --col8: 252, 187, 165; 12 --col9: 254, 230, 222; 13 --col10: 247, 197, 161; 14 --col11: 245, 205, 238; 15 --col12: 252, 67, 130; 16 position: relative; 17 background: linear-gradient( 18 65deg, 19 rgba(var(--col1), 0.81) 0%, 20 rgba(var(--col2), 0.81) 11%, 21 rgba(var(--col3), 0.81) 21%, 22 rgba(var(--col3), 0.81) 24%, 23 rgba(var(--col4), 0.5) 37%, 24 rgba(var(--col5), 0.81) 42%, 25 rgba(var(--col6), 0.81) 50%, 26 rgba(var(--col7), 0.9) 58%, 27 rgba(var(--col8), 0.81) 68%, 28 rgba(var(--col9), 0.81) 72%, 29 rgba(var(--col3), 0.81) 78%, 30 rgba(var(--col10), 0.81) 86%, 31 rgba(var(--col11), 0.81) 93%, 32 rgba(var(--col1), 0.81) 98% 33 ); 34 background-size: 105%; 35 box-shadow: -10px 10px 0px rgba(var(--col0), 0.005), 36 0px 20px 30px rgba(var(--col0), 0.16), 37 inset 5px 0 20px rgba(var(--col1), 0.5), 38 inset -5px 20px 10px rgba(var(--col4), 0.5), 39 inset 1px 3px 3px rgba(var(--col0), 0.25), 40 inset 0px -5px 1px rgba(var(--col7), 0.5), 41 inset 0px -5px 1px rgba(var(--col2), 0.95), 42 inset 1px 2px 1px rgba(var(--col12), 0.15), 43 inset 5px 5px 1px rgba(var(--col12), 0.35), 44 inset -5px 5px 1px rgba(var(--col12), 0.15), 45 inset 0px -20px 10px rgba(var(--col12), 0.15); 46 cursor: pointer; 47 padding: 1rem 2rem; 48 min-height: 5rem; 49 min-width: 16rem; 50 font-size: 1rem; 51 padding-inline-start: 10%; 52 font-weight: 600; 53 filter: hue-rotate(0deg); 54 color: #505050; 55 border-radius: var(--radius); 56 appearance: none; 57 border: 0; 58 transition: all 3s ease-in-out; 59 z-index: 0; 60} 61.button:hover { 62 color: rgba(var(--col7), 1); 63 text-shadow: 2px 2px 5px rgba(var(--col1), 0.75); 64 background-size: 350%; 65 filter: hue-rotate(125deg); 66} 67.button:active { 68 transition: all 0.1s ease-out; 69 scale: 0.95; 70} 71 72.button:hover::after { 73 backdrop-filter: blur(1px); 74 opacity: 0.25; 75 box-shadow: 0; 76 translate: 10%; 77} 78.button::before { 79 --border: 4px; 80 box-shadow: inset 0px 0px 20px rgba(var(--col1), 0.5), 81 0px 0px 1px rgba(var(--col2), 0.95); 82 content: ""; 83 border-radius: inherit; 84 position: absolute; 85 display: block; 86 width: calc(90% - var(--border)); 87 height: calc(75% - var(--border)); 88 inset: 0.5rem 0.5rem 0.5rem; 89 z-index: 0; 90 border: var(--border) solid transparent; 91 transition: all 3s ease-out; 92} 93.button::after { 94 content: ""; 95 aspect-ratio: 1; 96 clip-path: polygon(88% 0, 70% 45%, 100% 45%, 61% 100%, 72% 57%, 43% 57%); 97 position: absolute; 98 background: #505050; 99 backdrop-filter: blur(5px); 100 width: 10%; 101 opacity: 1; 102 inset: 33% 0 0 25%; 103 z-index: -1; 104 transition: all 1s ease-out; 105} 106
75 views
75 views
MIT License