【CSS】button悬停动效汇总

  • HTML
css 复制代码
<div id="container">

  <h1>CSS3 Animated Buttons</h1>

  <button class="highlight"> Highlight</button>
  <button class="fade"> Fade</button>
  <button class="boom"> Boom</button>

  <button class="focus"> Focus</button>
  <button class="rotate"> Rotate</button>
  <button class="knit"> Knit</button>

  <button class="shrink"> Shrink</button>
  <button class="squeeze"> Squeeze</button>
  <button class="deform"> Deform</button>

</div>
  • css
css 复制代码
* {
  margin: 0;
  padding: 0;
  -webkit-backface-visibility: hidden;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

body {
  background-color: #333;
  background: repeating-linear-gradient(45deg, #f6f6f6 0, #f6f6f6 5%, #fff 0, #fff 50%) 0 / 20px 20px;
}

#container {
  width: 330px;
  margin: 25px auto;
}
/*for lack a better headline*/

h1 {
  color: #333;
  font-family: Open Sans Condensed;
  font-size: 2.5em;
  text-align: center;
  margin-bottom: 40px;
}

h1:hover {
  font-size: 2.5em;
}

h1:hover:before,
h1:hover:after {
  font-style: italic;
  font-size: 0.5em;
}

h1:hover:before {
  content: "some ";
}

h1:hover:after {
  content: " by NobodyRocks";
}
/*i'm a button, click me!*/

button {
  width: 100px;
  height: 100px;
  color: #ffffff;
  background-color: #3498db;
  font-family: Open Sans Condensed;
  text-decoration: none;
  font-size: 1.8em;
  border: 2px #ffffff solid;
  margin: 10px 0 0 5px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}
/*magic starts here*/

button:hover {
  cursor: pointer;
}

.highlight:hover {
  background-color: #FFffff;
  color: #3498db;
}

.fade:hover {
  border: 0px;
  color: #009999;
  opacity: 0;
}

.boom:hover {
  color: #009999;
  border: #009999;
  opacity: 0;
  -webkit-transform: scale(2, 2);
  -moz-transform: scale(2, 2);
  transform: scale(2, 2);
}

.focus:hover {
  border-width: 20px;
}

.rotate:hover {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}

.knit:hover {
  height: 0px;
}

.shrink:hover {
  -webkit-transform: scale(0.0, 0.0);
  -moz-transform: scale(0.0, 0.0);
  transform: scale(0.0, 0.0);
}

.squeeze:hover {
  -webkit-transform: scale(1.5, 0.0);
  -moz-transform: scale(1.5, 0.0);
  transform: scale(1.5, 0.0);
}

.deform:hover {
  -webkit-transform: skew(45deg, 45deg);
  -moz-transform: skew(45deg, 45deg);
  transform: skew(45deg, 45deg);
}
/*for the sake of responsiveness...*/

@media (max-width: 330px) {
  #container {
    width: 100%;
  }
  button {
    width: 90%;
    margin: 5% 0 0 5%;
  }
}
相关推荐
卷Java4 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
proud12125 小时前
开源的 CSS 动画库
前端·css·开源
折翼的恶魔5 小时前
HTML媒体标签
前端·html
Filotimo_7 小时前
2.CSS3.(1).html
前端·css
华仔啊10 小时前
Vue+CSS 做出的LED时钟太酷了!还能倒计时,代码全开源
前端·css·vue.js
吃饺子不吃馅11 小时前
AntV X6 核心插件帮你飞速创建画布
前端·css·svg
通往曙光的路上12 小时前
时隔一天第二阶段他来了 html!!!!!!!!!!!
前端·html
爱吃甜品的糯米团子12 小时前
CSS图片背景属性
前端·css
Aoda12 小时前
浏览器字体设置引发的Bug:从一次调查到前端字体策略的深度思考
前端·css
带娃的IT创业者12 小时前
从零构建智能HTML转Markdown转换器:Python GUI开发实战
android·python·html