以下是一个简单的示例，展示了如何使用HTML、CSS和JavaScript创建一个按钮叠加层。

HTML代码：

  
  


  点击显示叠加层

  

    

      
叠加层标题
      
这是一个叠加层的内容。
      关闭
    
  

  

CSS代码（styles.css）：

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.hidden {
  display: none;
}

.overlay-content {
  background-color: white;
  padding: 20px;
  width: 300px;
  margin: 100px auto;
}

#close-button {
  margin-top: 10px;
}

JavaScript代码（script.js）：

var overlayButton = document.getElementById('overlay-button');
var overlay = document.getElementById('overlay');
var closeButton = document.getElementById('close-button');

overlayButton.addEventListener('click', function() {
  overlay.classList.remove('hidden');
});

closeButton.addEventListener('click', function() {
  overlay.classList.add('hidden');
});

上述代码中，我们首先定义了一个按钮（id为"overlay-button"），当点击该按钮时，会移除叠加层（id为"overlay"）的隐藏类（class为"hidden"），从而显示叠加层。叠加层包含一个标题、内容和一个关闭按钮。点击关闭按钮时，会再次添加隐藏类，从而隐藏叠加层。

通过以上代码，您可以创建一个简单的按钮叠加层。您可以根据需求自定义样式，并根据需要添加更多的交互逻辑。