Buttons

下载代码

html

css

分享到微信朋友圈

html

css

body {
  text-align: center;
  padding-top: 20vh;
  background: #34495e;
}

button {
  width: 20%;
  display: block;
  margin: 2px auto; 
  font-size: 4vw;
  background: whitesmoke;
  border-radius: 2px;
  font-family: arial;
  padding: 15px 0px;
  cursor: pointer;
  transition: box-shadow 1s ease, color 1s ease;
}

.left, .center, .right {
  display: inline-block;
}

.up {
  color: #e74c3c;
  border: solid 2px #e74c3c;
}
.up:hover {
  box-shadow: inset 0 3em #e74c3c;
  color: whitesmoke;
}

.left {
  color: #f1c40f;
  border: solid 2px #f1c40f;
}
.left:hover {
  box-shadow: inset 6em 0 #f1c40f;
  color: whitesmoke;
}

.center {
  color: #7f8c8d;
  border: solid 2px #7f8c8d;
}
.center:hover {
  box-shadow: inset 0 0 0 2em #7f8c8d;
  color: whitesmoke;
}

.right {
  color: #3498db;
  border: solid 2px #3498db;
}
.right:hover {
  box-shadow: inset -6em 0 #3498db;
  color: whitesmoke;
}

.down {
  color: #27ae60;
  border: solid 2px #2ecc71;
}
.down:hover {
  box-shadow: inset 0 -3em #2ecc71;
  color: whitesmoke;
}

JavaScript

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