带有多种 colored颜色 的HTML按钮

<button style="position: absolute; padding: 10px 20px; background-color: darkgray; border-radius: 15px; border: none; z-index: 1;">Document</button>
<button style="position: absolute; padding: 10px 50px; background-color: gray; border-radius: 15px; border: none; z-index: 0;">.pdf</button>

body {
  margin: 20px;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

button {
  border: 0;
  background: #555;
  color: white;
  font-family: sans-serif;
  font-size: 25px;
  border-radius: 15px;
  padding: 0 20px 0 0;
  white-space: nowrap;
}

button>span {
  background: #888;
  border-radius: 15px;
  display: inline-block;
  padding: 10px 20px;
  margin-right: 5px;
}

<div class="buttons">

  <button>
    <span>DocumentName</span> .pdf
  </button>

  <button>
    <span>a-very-long-document-name</span> .docx
  </button>

</div>

Html相关问答推荐

从收件箱获取内部HTML值

如何删除html原生对话框的宽度

css网格区域的布局不展开，也不显示滚动条

如何防止SVG图标出现断行？

隐藏滚动条和禁用文本 Select 的CSS技术？

放大缩小标题在外面的图像

将网格包装在css中

VBA从公共Google Drive地址下载文档-.Click事件(？)

如何使div填充父项的剩余高度

禁用所有行，但在16角中单击编辑按钮的行除外

调整屏幕大小时标题在图像下方重叠 - HTML

如何让一个 div 元素粘在另一个元素上？

如何在图片前面放置下拉框？

两个span，一个在div居中，好像没有另一个，另一个在右边

如何制作一个空的网格模板行来填充剩余空间？

为什么 text-align 应用于 span 而不是 CSS 中的 img

在 html 邮箱的左侧和右侧制作多个元素很热门吗？

右对齐 bootstrap 导航项而不是下拉菜单

本地 css 样式表未链接

Angular Material Hide Password 在输入时切换