在这个数字化时代，网页设计越来越注重用户体验。一个炫酷的发光按钮不仅能提升网页的视觉效果，还能吸引用户的注意力。今天，我们就来学习如何使用JavaScript和简单的CSS代码，打造一个令人眼前一亮的发光按钮。

准备工作

在开始之前，请确保你的网页中已经包含了基本的HTML和CSS代码。以下是一个简单的按钮HTML和CSS示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>炫酷发光按钮</title>
<style>
  .button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s;
  }

  .button:hover {
    background-color: #45a049;
  }
</style>
</head>
<body>

<button class="button">点击我</button>

<script>
  // JavaScript代码将在这里编写
</script>

</body>
</html>

JavaScript实现发光效果

接下来，我们将使用JavaScript来为按钮添加发光效果。这里，我们将使用getElementsByClassName方法来获取按钮元素，并为其添加一个onmouseover和onmouseout事件监听器，以实现鼠标悬停时的发光效果。

document.addEventListener('DOMContentLoaded', function() {
  var button = document.getElementsByClassName('button')[0];

  button.onmouseover = function() {
    this.style.boxShadow = '0 0 10px #ffffff';
  };

  button.onmouseout = function() {
    this.style.boxShadow = 'none';
  };
});

在上面的代码中，我们首先在文档加载完成后获取按钮元素。然后，我们为按钮添加了两个事件监听器：onmouseover和onmouseout。当鼠标悬停在按钮上时，onmouseover事件触发，按钮的boxShadow属性被设置为0 0 10px #ffffff，从而实现发光效果。当鼠标移出按钮时，onmouseout事件触发，boxShadow属性被重置为none，按钮恢复原状。

测试和优化

完成上述代码后，保存你的HTML文件，并在浏览器中打开它。你应该能看到一个带有发光效果的按钮。你可以通过调整boxShadow属性的值来优化发光效果，例如增加模糊半径或改变颜色。

通过学习如何使用JavaScript和CSS为按钮添加发光效果，你不仅能够提升网页的视觉效果，还能为用户提供更加丰富的交互体验。希望这篇文章能帮助你掌握这一技能，让你的网页按钮更加炫酷！