8种鼠标悬停的按钮特效【原创】

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需远程调用font-awesome图标字体库，然后设置好页面元素的样式，代码如下：

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
<style>
*, *:before, *:after {
  box-sizing: border-box;
}

.buttons {
  text-align: center;
  margin-top: 25px;
}
.buttons a.button {
  display: inline-block;
  margin: 25px;
  background: #00a5ec;
  color: white;
  padding: 20px;
  text-decoration: none;
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  position: relative;
  transition: .25s ease-in-out;
  border-radius: 3px;
}
.buttons a.button:before, .buttons a.button:after, .buttons a.button span {
  transition: .25s ease-in-out;
}
.buttons a.button.location {
  position: relative;
  overflow: hidden;
}
.buttons a.button.location span {
  display: block;
  position: relative;
  bottom: 0px;
}
.buttons a.button.location:before {
  content: '\f124';
  font-family: FontAwesome;
  display: block;
  width: 100%;
  height: 100%;
  padding: 20px;
  top: -100%;
  left: 0;
  position: absolute;
}
.buttons a.button.location:hover {
  background: #0944af;
}
.buttons a.button.location:hover span {
  bottom: -56px;
}
.buttons a.button.location:hover:before {
  top: 0%;
}
.buttons a.button.mail {
  position: relative;
  overflow: hidden;
}
.buttons a.button.mail span {
  display: block;
  position: relative;
  bottom: 0px;
}
.buttons a.button.mail:before {
  content: '\f1d8';
  font-family: FontAwesome;
  display: block;
  width: 100%;
  height: 100%;
  padding: 20px;
  top: -100%;
  left: 0;
  position: absolute;
}
.buttons a.button.mail:hover {
  background: #53af09;
}
.buttons a.button.mail:hover span {
  bottom: -56px;
}
.buttons a.button.mail:hover:before {
  top: 0%;
}
.buttons a.button.delete {
  position: relative;
  overflow: hidden;
}
.buttons a.button.delete span {
  display: block;
  position: relative;
  bottom: 0px;
}
.buttons a.button.delete:before {
  content: '\f1f8';
  font-family: FontAwesome;
  display: block;
  width: 100%;
  height: 100%;
  padding: 20px;
  top: -100%;
  left: 0;
  position: absolute;
}
.buttons a.button.delete:hover {
  background: #cb3017;
}
.buttons a.button.delete:hover span {
  bottom: -56px;
}
.buttons a.button.delete:hover:before {
  top: 0%;
}
.buttons a.button.glossy {
  overflow: hidden;
}
.buttons a.button.glossy:after {
  content: '\f054';
  font-family: FontAwesome;
  margin-left: 20px;
  position: relative;
  z-index: 2;
  color: white;
}
.buttons a.button.glossy:before {
  content: '';
  display: block;
  position: absolute;
  right: 0px;
  top: -10px;
  height: 200px;
  width: 50%;
  background: rgba(255, 255, 255, 0.15);
  transform: rotate(15deg);
}
.buttons a.button.glossy:hover {
  background: #0094d4;
}
.buttons a.button.glossy:hover:before {
  width: 80%;
  background: rgba(255, 255, 255, 0.15);
}
.buttons a.button.zoom {
  background: #00a5ec;
  color: #00a5ec;
  box-shadow: inset 0 0px 0 50px #d4f2ff;
}
.buttons a.button.zoom:after {
  content: '\f054';
  font-family: FontAwesome;
  margin-left: 20px;
  position: relative;
  z-index: 2;
  color: #00a5ec;
}
.buttons a.button.zoom:hover {
  box-shadow: inset 0 0px 0 0px #d4f2ff;
  color: white;
}
.buttons a.button.zoom:hover:after {
  color: white;
}
.buttons a.button.wiggle:after {
  content: '\f054';
  font-family: FontAwesome;
  display: inline-block;
  max-width: 0;
  margin-left: 0px;
  position: relative;
  z-index: 2;
  color: rgba(255, 255, 255, 0);
  left: -50px;
}
.buttons a.button.wiggle:hover {
  background: #0094d4;
}
.buttons a.button.wiggle:hover:after {
  max-width: 100px;
  margin-left: 20px;
  left: 0px;
  color: white;
  animation: wiggle 1s .25s ease-in-out infinite;
}
.buttons a.button.flood {
  background: rgba(0, 165, 236, 0.2);
  color: #00a5ec;
  box-shadow: inset 0 0px 0 -30px rgba(0, 255, 236, 0.4);
}
.buttons a.button.flood:after {
  content: '\f054';
  font-family: FontAwesome;
  margin-left: 20px;
  position: relative;
  z-index: 2;
  color: #00a5ec;
}
.buttons a.button.flood:hover {
  box-shadow: inset 0 -90px 0 -30px #00a5ec;
  color: white;
}
.buttons a.button.flood:hover:after {
  color: white;
}
.buttons a.button.slide-right {
  box-shadow: inset -200px 0 0 -20px rgba(0, 0, 0, 0.3);
}
.buttons a.button.slide-right:after {
  content: '\f054';
  font-family: FontAwesome;
  margin-left: 20px;
  position: relative;
  z-index: 2;
  color: #00a5ec;
}
.buttons a.button.slide-right:hover {
  box-shadow: inset -73px 0 0 -20px rgba(0, 0, 0, 0.3);
}
.buttons a.button.slide-right:hover:after {
  color: white;
  margin-left: 40px;
}

@keyframes wiggle {
  0% {
    margin-left: 20px;
    margin-right: 0px;
  }
  50% {
    margin-left: 16px;
    margin-right: 4px;
  }
  100% {
    margin-left: 20px;
    margin-right: 0px;
  }
}
</style>

页面的body部分，这里用a标签来设置按钮，8个a标签放入一个div容器里即可，代码如下：

<div class="buttons">
  <a href="#" class="button slide-right">左侧滑入</a>
  <a href="#" class="button flood">底部淹没</a>
  <a href="#" class="button wiggle">箭头摆动</a>
  <a href="#" class="button zoom">缩放填充</a>
  <br>
  <a href="#" class="button glossy">右侧斜切</a>
  <a href="#" class="button delete"><span>删除图标</span></a>
  <a href="#" class="button mail"><span>邮件图标</span></a>
  <a href="#" class="button location"><span>位置图标</span></a>
</div>