如何制作包含圆形图片与文字的自定义网页button

嘿，我刚好做过类似的按钮组件，给你一套简单易复用的实现方案，完全能达到你想要的效果！

第一步：HTML结构 #

我们用<a>标签作为整个可点击容器，把圆形图片和文字嵌套进去，这样点击图片或文字都会触发跳转：

<!-- 自定义篮球主题按钮 -->
<a href="/home" class="basketball-btn">
  <img src="basketball-home-icon.jpg" alt="首页图标" class="btn-icon">
  <span class="btn-text">首页</span>
</a>

<!-- 可以复制这个结构做其他页面按钮 -->
<a href="/matches" class="basketball-btn">
  <img src="basketball-matches-icon.jpg" alt="赛事图标" class="btn-icon">
  <span class="btn-text">赛事</span>
</a>

第二步：CSS样式 #

通过CSS实现圆形图片、垂直布局和交互效果，你可以根据篮球主题调整颜色（比如换成橙色、深棕这类风格色）：

/* 按钮容器：垂直排列内容，保证点击区域覆盖整个组件 */
.basketball-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #2d2d2d; /* 文字默认颜色 */
  padding: 10px 15px;
  border-radius: 10px; /* 可选：给整个按钮加圆角 */
  transition: all 0.3s ease;
  margin: 0 8px; /* 按钮之间的间距 */
}

/* 核心：把图片变成圆形 */
.btn-icon {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  object-fit: cover; /* 防止图片拉伸变形，自动裁剪多余部分 */
  margin-bottom: 7px;
  border: 2px solid #ff7f00; /* 篮球橙边框，贴合主题 */
}

/* 文字样式 */
.btn-text {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* 悬停交互效果，提升用户体验 */
.basketball-btn:hover {
  background-color: #fff3e0; /* 浅橙色背景，呼应篮球主题 */
}

.basketball-btn:hover .btn-icon {
  transform: scale(1.1); /* 悬停时图片轻微放大 */
  border-color: #ff5722;
}

小提示 #

• 尽量用正方形图片来做图标，这样圆形效果更规整；如果是长方形图片，object-fit: cover会自动裁剪出居中的圆形区域
• 你可以把所有按钮放在一个容器里，用flex布局排成一行或一列，适配不同页面的导航需求

内容的提问来源于stack exchange，提问作者DudeManPerson