时间戳

首页 > 解决方案 > 带有 bootstrap4 的自定义按钮

html - 带有 bootstrap4 的自定义按钮

问题描述

我想建立一个这样的按钮： 在此处输入图像描述

我正在使用引导程序创建一个按钮：<button type="button" class="btn btn-primary">Game</button>

有人可以帮我制作3d效果吗？

标签： htmlcssbootstrap-4

解决方案

我认为这是您可以使用 CSS 获得的最接近的结果。（注意以下脚本使用了 Bootstrap4）

<style type="text/css">
.my-style {
  border-radius: 8px;
  width: 120px;
  box-shadow: inset 0px 3px 1px 0px rgba(83,154,197,1),
              inset 3px 0px 1px 0px rgba(83,154,197,0.4),
              inset -0px -3px 1px 0px rgba(0,73,140,0.8),
              inset -3px 0px 1px 0px rgba(0,73,140,0.3);
}
.my-style:hover {
  box-shadow: inset 0px 3px 1px 0px rgba(83,154,197,0.5),
              inset 3px 0px 1px 0px rgba(83,154,197,0.2),
              inset 0px -3px 1px 0px rgba(0,73,140,1),
              inset -3px 0px 1px 0px rgba(0,73,140,0.5);
}
</style>
<button type="button" class="btn btn-primary my-style">GAME</button>

您始终可以将图像本身用作按钮： 在 <button> 元素中嵌入图像

推荐阅读