Preview de Gradiente

Botão com Gradiente // Animação suave para gradientes document.getElementById('gradient_start').addEventListener('input', updateGradientPreview); document.getElementById('gradient_end').addEventListener('input', updateGradientPreview); document.getElementById('btn_gradient_start').addEventListener('input', updateBtnGradientPreview); document.getElementById('btn_gradient_end').addEventListener('input', updateBtnGradientPreview); document.getElementById('btn_text').addEventListener('input', updateBtnGradientPreview); function updateGradientPreview() { var start = document.getElementById('gradient_start').value; var end = document.getElementById('gradient_end').value; var el = document.getElementById('gradient-preview'); el.style.background = 'linear-gradient(90deg,'+start+','+end+')'; } function updateBtnGradientPreview() { var start = document.getElementById('btn_gradient_start').value; var end = document.getElementById('btn_gradient_end').value; var text = document.getElementById('btn_text').value; var el = document.getElementById('btn-gradient-preview'); el.style.background = 'linear-gradient(90deg,'+start+','+end+')'; el.style.color = text; }

Pré-visualização do Tema

Botão Principal Botão Secundário