botão moderno com efeito de luz
Aqui está um exemplo de como criar um botão moderno com efeito de luz em PHP, utilizando HTML, CSS e JavaScript: **index.php** ```php <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Botão Moderno com Efeito de Luz</title> <link rel="stylesheet" href="style.css"> </head> <body> <button id="botao">Clique Aqui</button> <script src="script.js"></script> </body> </html> ``` **style.css** ```css #botao { background-color: #4CAF50; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } #botao:hover { background-color: #3e8e41; } #botao:active { background-color: #2e6e36; } #botao:focus { box-shadow: 0 0 10px #4CAF50; } ``` **script.js** ```javascript const botao = document.getElementById('botao'); botao.addEventListener('click', () => { botao.classList.add('ativo'); setTimeout(() => { botao.classList.remove('ativo'); }, 500); }); botao.addEventListener('mouseover', () => { botao.classList.add('hover'); }); botao.addEventListener('mouseout', () => { botao.classList.remove('hover'); }); ``` **style.css (adicionando efeito de luz)** ```css .ativo { animation: luz 0.5s forwards; } @keyframes luz { 0% { box-shadow: 0 0 10px #4CAF50; } 100% { box-shadow: 0 0 20px #4CAF50; } } .hover { animation: hover 0.2s forwards; } @keyframes hover { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } ``` Nesse exemplo, criamos um botão com um efeito de luz ao clicar nele. Ao clicar no botão, adicionamos a classe `ativo` e removemos após 0,5 segundos. Além disso, adicionamos um efeito de luz ao botão ao passar o mouse sobre ele. Lembre-se de que essa é apenas uma forma de criar um botão moderno com efeito de luz e que você pode personalizar o design e os efeitos de acordo com suas necessidades.