按钮 · Wise Turtle

类型：组件　·　分类：按钮　·　收录：2026-09-19　·　源码：会员可见

[hidecontent type="vip1"]

<div class="frame">
  <div class="center">
		<button>Hover me</button>
  </div>
</div>
<style>
/* From Uiverse.io by laminelawal - Tags: alert, button, 2d button */
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
  overflow: hidden;
  background: #fff;
  color: #333;
  font-family: 'Open Sans', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

button {
  padding: 15px 15px;
  border: none;
  width: 170px;
  height: 55px;
  box-shadow: 15px 15px darkblue;
  cursor: pointer;
  transition: 0.5s ease;
  background: lightgray;
  font-size: 18px;
  font-weight: bolder;
  text-transform: uppercase;
}

button:hover {
  box-shadow: -15px -15px lightgray;
  transform: translate(15px, 15px);
  background: darkblue;
  color: white;
}
</style>

[/hidecontent]