CSS图片廊是一种非常流行的网页设计方式，能够充分展示图片和增强用户体验。控制按钮是实现CSS图片廊重要的一部分，通过按钮可以控制图片的滑动和选择。在这里，我们将学习如何使用CSS创建一个美观实用的图片廊，并添加控制按钮。

/*CSS 代码*/
/* 图片容器 */
.gallery {
width: 100%; /* 宽度100% */
position: relative; /* 相对定位 */
overflow: auto; /* 滚动条 */
white-space: nowrap; /* 不换行 */
text-align:center; /* 文本居中 */
}
/* 图片 */
.gallery img {
display: inline-block; /* 内联对象 */
max-width: 80%; /* 最大宽度80% */
height: auto; /* 自动高度 */
margin: 20px 10px; /* 外边距 */
vertical-align: middle; /* 垂直对齐 */
}
/* 控制按钮 */
.gallery .btn {
display: inline-block; /* 内联对象 */
position: absolute; /* 绝对定位 */
top: 50%; /* 顶部居中 */
transform: translateY(-50%); /* 垂直居中 */
background-color: #FFF; /* 背景白色 */
color: #000; /* 文字黑色 */
padding: 10px; /* 内边距 */
font-size: 18px; /* 字体大小 */
border: 1px solid #000; /* 边框 */
cursor: pointer; /* 鼠标光标 */
z-index: 1; /* 堆叠顺序 */
}
/* 左右按钮 */
.gallery #prev, .gallery #next {
width: 50px; /* 宽度50px */
}
/* 左边按钮 */
.gallery #prev {
left: 0; /* 左侧定位 */
}
/* 右边按钮 */
.gallery #next {
right: 0; /* 右侧定位 */
}
/* 鼠标悬停 */
.gallery .btn:hover {
background-color: #000; /* 背景黑色 */
color: #FFF; /* 文字白色 */
}

上述代码中，我们首先定义了图片容器的样式，其中设置了容器的宽度、定位、滚动条、不换行和文本居中。接着，对图片进行样式设置，包括内联对象、最大宽度、自动高度、外边距和垂直对齐等。最后，定义了控制按钮的样式，包括内联对象、绝对定位、背景颜色、边框、鼠标光标和堆叠顺序等。

我们在HTML文件中添加以下代码：

<div class="gallery">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
<div id="prev" class="btn">向左</div>
<div id="next" class="btn">向右</div>
</div>

在图片容器中，我们添加了三个图片和两个控制按钮。其中，ID为prev的按钮控制向左滑动图片，ID为next的按钮控制向右滑动图片。我们可以使用JavaScript或jQuery实现按钮的滑动功能。

总之，使用CSS创建一个美观实用的图片廊并添加控制按钮需要一定的技巧和经验。通过学习这个例子，希望大家能够掌握CSS的相关知识，实现更多更好的网页设计效果。