Button Effects

.btn-1:hover { box-shadow: 0 0 15px #facc15; }\n.btn-1:active { box-shadow: 0 0 25px #facc15; }

.btn-2 { border: 2px solid transparent; }\n.btn-2:hover { border-image: linear-gradient(45deg, #ef4444, #3b82f6) 1; }

.btn-3 { background: conic-gradient(#ef4444, #3b82f6, #facc15); }\n.btn-3:hover { background: conic-gradient(#facc15, #ef4444, #3b82f6); }

.btn-4:hover { transform: rotateX(180deg); }\n.btn-4 { transition: transform 0.3s; }

.btn-5:hover { filter: blur(2px); }\n.btn-5:active { filter: blur(4px); }

.btn-6:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }

.btn-7 .icon { transform: translateX(-10px); opacity: 0; }\n.btn-7:hover .icon { transform: translateX(0); opacity: 1; }

.btn-8:active { transform: scale(0.9); animation: jelly 0.3s; }\n@keyframes jelly { 50% { transform: scale(1.2, 0.8); } }

.btn-9 { position: relative; overflow: hidden; }\n.btn-9:after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: #ef4444; transition: top 0.3s; }\n.btn-9:hover:after { top: 0; }

.btn-10:hover { border-radius: 20px; }\n.btn-10 { transition: border-radius 0.3s; }

.btn-11:hover { box-shadow: 0 0 15px #ef4444; animation: flicker 0.5s infinite; }\n@keyframes flicker { 50% { box-shadow: 0 0 5px #ef4444; } }

.btn-12 { position: relative; }\n.btn-12:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #3b82f6; transition: width 0.3s; }\n.btn-12:hover:after { width: 100%; }

.btn-13 { position: relative; overflow: hidden; }\n.btn-13:after { content: ''; position: absolute; width: 0; height: 0; background: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: translate(-50%, -50%); }\n.btn-13:active:after { animation: ripple 0.5s; }\n@keyframes ripple { to { width: 200px; height: 200px; opacity: 0; } }

.btn-14:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); animation: pulse 1s infinite; }\n@keyframes pulse { 50% { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } }

.btn-15:hover { transform: scaleX(1.2); }\n.btn-15 { transition: transform 0.3s; }

.btn-16:hover { transform: rotate(5deg); }\n.btn-16 { transition: transform 0.3s; }

.btn-17 { position: relative; }\n.btn-17:after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #facc15; transition: width 0.3s; }\n.btn-17:hover:after { width: 100%; }

.btn-18:hover { background: linear-gradient(to right, #3b82f6, #ef4444); animation: wave 1s infinite; }\n@keyframes wave { 50% { background: linear-gradient(to right, #ef4444, #3b82f6); } }

.btn-19:active { transform: scale(1.2); }\n.btn-19 { transition: transform 0.2s; }

.btn-20 { background: repeating-linear-gradient(45deg, #fff, #fff 5px, #000 5px, #000 10px); }\n.btn-20:hover { background: repeating-linear-gradient(45deg, #000, #000 5px, #fff 5px, #fff 10px); }

.btn-21:active { box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3); }\n.btn-21 { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); }

.btn-22:hover { background: linear-gradient(45deg, #ff0000, #0000ff); }\n.btn-22 { background: linear-gradient(45deg, #0000ff, #ff0000); }

.btn-23:hover { animation: disco 0.5s infinite; }\n@keyframes disco { 0% { background: #ef4444; } 50% { background: #3b82f6; } 100% { background: #facc15; } }

.btn-24:hover { transform: scale(1.1); animation: orbit 0.5s; }\n@keyframes orbit { 50% { transform: scale(0.9); } }

.btn-25 { opacity: 0.7; }\n.btn-25:hover { opacity: 1; transition: opacity 0.3s; }

.btn-26 { background: transparent; border: 1px solid #fff; }\n.btn-26:hover { background: #fff; color: #000; }

.btn-27:hover { animation: jello 0.5s; }\n@keyframes jello { 25% { transform: skewX(-10deg); } 75% { transform: skewX(10deg); } }

.btn-28 .icon { transform: scale(0); }\n.btn-28:hover .icon { transform: scale(1); transition: transform 0.3s; }

.btn-29:hover { background: linear-gradient(to right, #facc15, transparent); }

.btn-30:hover { transform: translate(5px, -5px); }\n.btn-30 { transition: transform 0.3s; }

.btn-31 { position: relative; }\n.btn-31:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #3b82f6; border-radius: inherit; animation: pulse-ring 1s infinite; }\n@keyframes pulse-ring { 50% { transform: scale(1.2); opacity: 0; } }

.btn-32:hover { filter: hue-rotate(90deg); }\n.btn-32:active { filter: hue-rotate(180deg); }

.btn-33:hover { box-shadow: 0 0 20px #facc15; background: radial-gradient(circle, #facc15, #ef4444); }

.btn-34:hover { transform: rotate(360deg); }\n.btn-34 { transition: transform 0.5s; }

.btn-35:hover { animation: stop-motion 0.5s steps(5); }\n@keyframes stop-motion { 0% { transform: translateX(0); } 100% { transform: translateX(10px); } }

.btn-36 { box-shadow: 0 0 0 2px #ef4444, 0 0 0 4px #3b82f6, 0 0 0 6px #facc15; }\n.btn-36:hover { box-shadow: 0 0 0 4px #ef4444, 0 0 0 6px #3b82f6, 0 0 0 8px #facc15; }

.btn-37:hover { box-shadow: 0 0 15px #8b5cf6; }\n.btn-37:active { box-shadow: 0 0 25px #8b5cf6; }

.btn-38:hover { animation: vibrate 0.3s infinite; }\n@keyframes vibrate { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }

.btn-39:hover { transform: scaleY(0.8); }\n.btn-39 { transition: transform 0.3s; }

.btn-40:hover { filter: contrast(1.5); }\n.btn-40:active { filter: contrast(2); }

.btn-41:hover { background: #facc15; color: #000; }\n.btn-41 { font-family: 'Montserrat', sans-serif; }

.btn-42 { border: 2px solid #3b82f6; }\n.btn-42:hover { border-image: linear-gradient(to right, #3b82f6, #ef4444) 1; }

.btn-43 { background: linear-gradient(45deg, #ef4444, #facc15); }\n.btn-43:hover { background: linear-gradient(45deg, #facc15, #ef4444); }

.btn-44 { position: relative; }\n.btn-44:after { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #3b82f6; transition: width 0.3s; }\n.btn-44:hover:after { width: 100%; }

.btn-45:hover { background: #ef4444; box-shadow: 0 0 15px #ef4444; }\n.btn-45:active { background: #dc2626; }

.btn-46 { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); }\n.btn-46:hover { backdrop-filter: blur(10px); }

.btn-47 { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); }\n.btn-47:hover { background: rgba(255, 255, 255, 0.3); }

.btn-48:hover { background: linear-gradient(45deg, rgba(59, 130, 246, 0.5), rgba(239, 68, 68, 0.5)); box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); }

.btn-49 { position: relative; overflow: hidden; }\n.btn-49:after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: #3b82f6; border-radius: 50%; transform: translate(-50%, -50%); }\n.btn-49:hover:after { width: 200px; height: 200px; }

.btn-50:hover { transform: scale(1.1); animation: kinetic 0.5s; }\n@keyframes kinetic { 50% { transform: scale(0.9); } }