![](/build/_assets/logo-png-XGWSYHKJ.png)
Button by MRez321
#e8e8e8
1.button { 2 position: relative; 3 z-index: 5; 4 isolation: isolate; 5 cursor: pointer; 6 transition: 0.4s; 7 8 width: fit-content; 9 height: 4.8rem; 10 padding: 1rem; 11 margin-inline: auto; 12 border: solid 3px; 13 border-color: #0000004d #0000004d #00000080 #00000080; 14 border-radius: 0.8rem; 15 16 font-family: cursive; 17 font-size: 1.4rem; 18 font-weight: 700; 19 20 display: flex; 21 justify-content: center; 22 align-items: center; 23 gap: 0.5rem; 24 25 animation: boxShadowRotation 2s linear infinite; 26} 27.button:hover, 28.button:active { 29 scale: 0.96; 30 border-color: #00000080 #00000080 #0000004d #0000004d; 31 padding: 2rem; 32 box-shadow: 0 0 4px 2px rgba(208, 212, 218, 0.979); 33 background: #fbfdfc; 34} 35 36.button::before, 37.button::after { 38 position: absolute; 39 content: ""; 40 background: #f4f5f4; 41 transition: 0.4s; 42} 43.button::before { 44 z-index: -1; 45 inset: 0.3rem; 46 border-radius: 4rem; 47 box-shadow: inset 0 0 4px 2px rgba(208, 212, 218, 0.979); 48} 49.button:hover::before { 50 inset: 0.1rem; 51 z-index: -1; 52 margin-inline: auto; 53 border: solid 1px; 54 border-color: #00000080 #00000080 #0000004d #0000004d; 55 border-radius: 0.8rem; 56 animation: boxShadowRotation 2s linear infinite; 57 background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); 58} 59.button::after { 60 background: none; 61 z-index: -2; 62 border-radius: 1rem; 63} 64.button:hover::after { 65 inset: -0.5rem; 66 border: solid 1px #00000080; 67 box-shadow: 0 0 10px 4px #a1c4fd; 68 background: #c2e9fb; 69} 70 71.button svg { 72 width: 2rem; 73 height: 2rem; 74 z-index: 10; 75} 76.button:hover svg { 77 animation: rotation 0.8s linear; 78 filter: drop-shadow(0 0 10px 10px rgb(170, 166, 166)); 79} 80 81@keyframes rotation { 82 0% { 83 transform: rotate(0deg) translate(0, 0) scale(1); 84 } 85 50% { 86 transform: rotate(180deg) translate(-4rem, -2rem) scale(1.4); 87 } 88 100% { 89 transform: rotate(360deg) translate(0, 0) scale(1); 90 } 91} 92@keyframes boxShadowRotation { 93 0% { 94 box-shadow: inset 10px 10px 20px rgba(29, 43, 83, 0.2); 95 } 96 25% { 97 box-shadow: inset -10px 10px 20px rgba(29, 43, 83, 0.2); 98 } 99 50% { 100 box-shadow: inset -10px -10px 20px rgba(29, 43, 83, 0.2); 101 } 102 75% { 103 box-shadow: inset 10px -10px 20px rgba(29, 43, 83, 0.2); 104 } 105 100% { 106 box-shadow: inset 10px 10px 20px rgba(29, 43, 83, 0.2); 107 } 108} 109
61 views
61 views
MIT License