Button by EddyBel
#e8e8e8
1.button__click { 2 border: none; 3 cursor: pointer; 4 position: relative; 5 overflow: hidden; 6 text-transform: uppercase; 7 transition: box-shadow 400ms; 8 padding: 0.7em 1.7em; 9 font-size: 1rem; 10 border-radius: 20px; 11 color: rgb(0, 0, 0, 0.75); 12 background: transparent; 13 transform: scale(1.1) perspective(500px) rotateX(15deg) rotateY(-10deg); 14} 15 16.button__click:hover { 17 animation: button__click__animation 5.5s infinite both; 18} 19 20.button__click__background { 21 transition: transform 1.5s; 22 z-index: -2; 23 position: absolute; 24 left: 0; 25 top: 0; 26 width: 200%; 27 height: 200%; 28 animation: button__click__background 10s infinite; 29 background-color: #99fff8; 30 background-image: radial-gradient(at 89% 76%, hsla(13,63%,73%,1) 0px, transparent 50%), 31 radial-gradient(at 69% 38%, hsla(217,85%,71%,1) 0px, transparent 50%), 32 radial-gradient(at 12% 8%, hsla(214,70%,64%,1) 0px, transparent 50%), 33 radial-gradient(at 53% 10%, hsla(339,64%,65%,1) 0px, transparent 50%), 34 radial-gradient(at 5% 67%, hsla(212,74%,70%,1) 0px, transparent 50%); 35} 36 37.button__click::before { 38 content: ""; 39 width: 100%; 40 height: 100%; 41 position: absolute; 42 left: 0; 43 top: 0; 44 z-index: -1; 45 background: rgba(255, 255, 255, 0.295); 46} 47 48.button__click:focus { 49 box-shadow: 0px 0px 0px 2px #000; 50} 51 52@keyframes button__click__animation { 53 0%, 100% { 54 transform: scale(1.1) perspective(500px) rotateX(15deg) rotateY(-10deg); 55 } 56 57 50% { 58 transform: scale(0.9) perspective(500px) rotateX(-15deg) rotateY(15deg); 59 } 60} 61 62@keyframes button__click__background { 63 0%, 100% { 64 transform: translateX(0%); 65 } 66 67 25% { 68 transform: translateX(-50%); 69 } 70 71 50% { 72 transform: translateX(-50%) translateY(-50%); 73 } 74 75 75% { 76 transform: translateX(0%) translateY(-50%); 77 } 78}
787 views
787 views
MIT License