#e8e8e8
1button { 2 font-size: 28px; 3 color: rgb(35, 75, 83); 4 background-color: rgb(217, 238, 242); 5 background-image: linear-gradient(180deg, rgb(201, 194, 240) 30%, transparent 70%); 6 background-repeat: no-repeat; 7 background-position: center 45%; 8 background-size: 100% 200%; 9 padding: 10px 30px; 10 border-radius: 30px; 11 border: none; 12 box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px; 13 position: relative; 14 transition: all 0.5s ease; 15 outline: none; 16} 17 18button::before, button::after { 19 content: ""; 20 inset: 0; 21 position: absolute; 22 border-radius: 5em; 23} 24 25button::before { 26 background-image: radial-gradient(ellipse, rgba(204, 246, 255, 0.8) 20%, transparent 50%, transparent 200%), linear-gradient(90deg, #404040 -10%, transparent 30%, transparent 70%, #404040 110%); 27 box-shadow: inset 0 0.25em 0.75em rgba(0, 0, 0, 0.8), inset 0 -0.05em 0.2em rgba(255, 255, 255, 0.4), inset 0 -1px 3px rgba(25, 196, 230, 0.75); 28 background-blend-mode: overlay; 29 background-repeat: no-repeat; 30 background-size: 200% 80%, cover; 31 background-position: center 220%; 32 mix-blend-mode: overlay; 33 filter: blur(0); 34} 35 36button::after { 37 background: linear-gradient(180deg, rgba(213, 204, 255, 0.726), rgba(92, 74, 181, 0.75) 40%, transparent 80%); 38 top: 0.075em; 39 left: 0.75em; 40 right: 0.75em; 41 bottom: 1.4em; 42 filter: blur(1px); 43 mix-blend-mode: screen; 44} 45 46button:hover, button:active, button:focus { 47 outline: none; 48 box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; 49 background-position: center calc( 45% - 0.75em ); 50} 51
801 views
801 views
Comments
MIT License