鼠标点击按钮，按钮发出天蓝色的光，并在周围产生光晕

实现这个效果可以使用CSS3的伪元素和animation属性来实现。

首先，我们可以创建一个光晕的伪元素，并设置其初始状态为透明。然后，在按钮被点击时，使用animation属性让光晕逐渐变为不透明，并在一段时间后消失。

以下是示例代码：

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

.btn {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.btn::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  opacity: 0;
  background-color: rgba(0, 191, 255, 0.4);
  z-index: -1;
}

.btn:active::before {
  animation: halo 1s ease-out;
}

@keyframes halo {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

在上面的代码中，我们使用::before伪元素来创建光晕，并在按钮被点击时，使用animation属性让光晕逐渐变为不透明，并在一段时间后消失。注意，我们使用了z-index属性将光晕置于按钮的后面，以避免遮挡按钮的内容。

你可以根据需要调整光晕的大小、颜色和动画效果，以实现你想要的效果。