在网页设计中，按钮的作用非常重要，有时我们希望通过点击按钮来实现一些交互功能，比如切换图片。利用 CSS，可以很方便地实现按钮来切换图片的效果。

首先，我们需要为按钮添加一个 class 名称，让 CSS 能够将其识别。在 HTML 代码中，我们定义按钮代码如下：

点击切换图片

接着，在 CSS 中定义按钮样式：

.button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}

现在，我们需要为按钮添加一个点击事件，当用户点击按钮时，切换图片。在 HTML 代码中，我们需要添加一个 img 标签，其中的图片路径为默认要显示的图片。代码如下：

点击切换图片

在 CSS 中，我们需要定义图片的样式，让其居中显示。

#image {
display: block;
margin: 0 auto;
width: 50%;
height: auto;
}

最后，在 JavaScript 中，我们需要定义一个函数（changeImage）来切换图片。代码如下：

function changeImage() {
var img = document.getElementById("image");
if (img.src.match("default-image.jpg")) {
img.src = "new-image.jpg";
} else {
img.src = "default-image.jpg";
}
}

现在，我们已经完成了使用 CSS 点击按钮切换图片的效果。当用户点击按钮时，会切换默认图片和新图片。