![](/build/_assets/logo-png-XGWSYHKJ.png)
This post is saved as a draft.
#212121
1.button { 2 position: relative; 3 display: flex; 4 align-items: center; 5 padding: 0.75rem 1.5rem; 6 background: linear-gradient(to right, #3b82f6, #9333ea); 7 border: none; 8 border-radius: 9999px; 9 box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); 10 color: white; 11 cursor: pointer; 12 overflow: hidden; 13 transition: all 0.3s ease-in-out; 14} 15 16.button:hover { 17 transform: scale(1.05); 18 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); 19} 20 21.button:active { 22 transform: scale(0.95); 23} 24 25.button:focus { 26 outline: none; 27 box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5); 28} 29 30.button svg { 31 width: 3rem; 32 height: 3rem; 33 margin-right: 0.5rem; 34 transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; 35} 36 37.button:hover svg { 38 transform: rotate(20deg) scale(1.1); 39 filter: drop-shadow(0 0 10px #ffd700); 40} 41 42.button span { 43 font-size: 1.125rem; 44 font-weight: 600; 45 transition: transform 0.3s ease-in-out, color 0.3s ease-in-out, 46 text-shadow 0.3s ease-in-out; 47} 48 49.button:hover span { 50 color: #ffd700; 51 text-shadow: 0 0 10px #ffd700; 52} 53 54.button .text-md { 55 font-size: 1rem; 56 margin-left: 0.5rem; 57 transition: transform 0.3s ease-in-out, color 0.3s ease-in-out, 58 text-shadow 0.3s ease-in-out; 59} 60 61.button:hover .text-md { 62 color: #ffd700; 63 text-shadow: 0 0 10px #ffd700; 64} 65 66.ripple { 67 position: absolute; 68 border-radius: 50%; 69 background: rgba(255, 255, 255, 0.6); 70 animation: ripple 1s linear infinite; 71 pointer-events: none; 72} 73 74.button:active .ripple { 75 animation: ripple-on-click 0.6s linear; 76} 77 78@keyframes ripple { 79 0% { 80 transform: scale(0); 81 opacity: 1; 82 } 83 100% { 84 transform: scale(4); 85 opacity: 0; 86 } 87} 88 89@keyframes ripple-on-click { 90 0% { 91 transform: scale(0); 92 opacity: 1; 93 } 94 100% { 95 transform: scale(4); 96 opacity: 0; 97 } 98} 99
Variation of abutton
Variation of abutton