【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%;
  }
}
相关推荐
鸽鸽程序猿2 小时前
【前端】CSS
前端·css
学不会•4 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
猫爪笔记10 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
爱上语文11 小时前
HTML和CSS 表单、表格练习
前端·css·html
小肚肚肚肚肚哦12 小时前
盘点浏览器盒模型中各种 width、height 、边距和位置属性
css·html
NightCyberpunk12 小时前
HTML、CSS
前端·css·html
南城FE13 小时前
12个更现代化的CSS单行优化技巧
前端·css
啵咿傲16 小时前
重绘&重排、CSS树&DOM树&渲染树、动画加速 ✅
前端·css
前端Hardy16 小时前
HTML&CSS:数据卡片可以这样设计
前端·javascript·css·3d·html
流烟默16 小时前
CSS中Flex布局应用实践总结
前端·css·flex布局