按钮 · Tiny Frog

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

[hidecontent type="vip1"]

<button class="button1">
 Click me!
</button>
<style>
/* From Uiverse.io by newrocker2468 - Tags: simple, green, button, hover, simple button, #button */
.button1 {
  background-color: white;
  font-weight: bold;
  font-size: 1em;
  border: none;
  border-radius: 5px;
  padding: 1.2em;
  color: rgb(0, 0, 0);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 500ms;
  z-index: 99;
}

.button1::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 20px;
  bottom: -30px;
  left: 45px;
  background-color: #5affc0;
  z-index: -99;
  transition: all 500ms;
}

.button1:hover::after {
  width: 120px;
  height: 60px;
  border-radius: 10px;
  transition: all 500ms;
  bottom: -1px;
  left: -1px;
}

.button1:hover {
  border-radius: 20px;
  box-shadow: 0 0 100px 20px #5affc0;
}

.button1:active {
  transform: translateY(10px);
}

.button1:focus {
  border: 5px solid #a0fad8;
}

</style>

[/hidecontent]