在 CSS 中，我们不能直接创建一个按钮点击打开模态窗口（modal）的功能，因为 CSS 是一种样式表语言，主要用于描述文档的外观和格式化，而不包含逻辑或行为。你通常需要使用 JavaScript 或者 jQuery 等脚本语言来实现这种交互效果。

以下是一个简单的基于 Bootstrap 框架和 jQuery 的示例：

<!-- 引入 Bootstrap 和 jQuery -->  
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>  
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>  
<!-- 创建一个按钮 -->  
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">  
  打开模态窗口  
</button>  
<!-- 创建一个模态窗口 -->  
<div class="modal fade" id="myModal">  
  <div class="modal-dialog">  
    <div class="modal-content">  
      <!-- 模态窗口的头部 -->  
      <div class="modal-header">  
        <h4 class="modal-title">标题</h4>  
        <button type="button" class="close" data-dismiss="modal">&times;</button>  
      </div>  
      <!-- 模态窗口的主体 -->  
      <div class="modal-body">  
        这里是模态窗口的内容。  
      </div>  
      <!-- 模态窗口的底部 -->  
      <div class="modal-footer">  
        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>  
      </div>  
    </div>  
  </div>  
</div>  

在这个例子中，我们首先引入了 Bootstrap 和 jQuery。然后创建一个按钮，通过 data-toggle="modal" 和 data-target="#myModal" 指定了该按钮的点击事件会打开 ID 为 myModal 的模态窗口。最后我们定义了模态窗口及其内容。