#e8e8e8
1.button { 2 all: unset; 3 width: 100px; 4 height: 30px; 5 font-size: 16px; 6 background: transparent; 7 border: none; 8 position: relative; 9 color: #f0f0f0; 10 cursor: pointer; 11 z-index: 1; 12 padding: 10px 20px; 13 display: flex; 14 align-items: center; 15 justify-content: center; 16 white-space: nowrap; 17 user-select: none; 18 -webkit-user-select: none; 19 touch-action: manipulation; 20 transition: 0.3s ease-in-out; 21} 22 23.button:hover { 24 box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; 25} 26 27.button::after, 28.button::before { 29 content: ''; 30 position: absolute; 31 bottom: 0; 32 right: 0; 33 z-index: -99999; 34 transition: all .4s; 35} 36 37.button::before { 38 transform: translate(0%, 0%); 39 width: 100%; 40 height: 100%; 41 background-color: #4158D0; 42 background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); 43 border-radius: 10px; 44} 45 46.button::after { 47 transform: translate(10px, 10px); 48 width: 35px; 49 height: 35px; 50 background: #6804da2f; 51 backdrop-filter: blur(5px); 52 -webkit-backdrop-filter: blur(5px); 53 border-radius: 50px; 54} 55 56.button:hover::before { 57 transform: translate(5%, 20%); 58 width: 110%; 59 height: 110%; 60} 61 62.button:hover::after { 63 border-radius: 10px; 64 transform: translate(0, 0); 65 width: 100%; 66 height: 100%; 67} 68 69.button:active::after { 70 transition: 0s; 71 transform: translate(0, 5%); 72}
403 views
403 views
Comments
MIT License