超简洁按钮

下载代码

html

css

分享到微信朋友圈

html

css

button {
  --color-gradient-start: #4da7db;
  --color-gradient-stop: #5bc6ff;
  --color-outset-start: #3c82aa;
  --color-outset-stop: #6ff1ff;
  --color-inset-start: rgba(0,0,0,0);
  --color-inset-stop: rgba(0,0,0,0);
  font-size: 2rem;
  color: #002c59;
  margin: auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  border: 0;
  outline: 0;
  padding: .5em 1em;
  border-radius: 1.3em;
  background: linear-gradient(145deg, var(--color-gradient-start), var(--color-gradient-stop));
  box-shadow: 0.4em 0.4em 0.8em var(--color-outset-start), -0.4em -0.4em 0.8em var(--color-outset-stop), inset 0.2em 0.2em 0.4em var(--color-inset-start), inset -0.2em -0.2em 0.4em var(--color-inset-stop);
  transition: --color-gradient-stop 0.4s, --color-gradient-start 0.4s, --color-outset-start 0.8s, --color-outset-stop 0.8s, --color-inset-start 0.8s, --color-inset-stop 0.8s, color 1s;
}
button:hover {
  --color-gradient-start: #5bc6ff;
  --color-gradient-stop: #4da7db;
  --color-outset-start: rgba(0,0,0,0);
  --color-outset-stop: rgba(0,0,0,0);
  --color-inset-start: #3c82aa;
  --color-inset-stop: #6ff1ff;
  color: #001f3f;
}

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  height: 100vh;
  background: #55b9f3;
  color: #002c59;
}

h1 {
  text-align: center;
}

span {
  font-size: .3em;
  font-size: italic;
  display: block;
  text-align: left;
  color: inherit;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg