【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%;
  }
}
相关推荐
我要洋人死29 分钟前
导航栏及下拉菜单的实现
前端·css·css3
小白白一枚11111 小时前
css实现div被图片撑开
前端·css
@蒙面大虾12 小时前
CSS综合练习——懒羊羊网页设计
前端·css
顾菁寒12 小时前
WEB第二次作业
前端·css·html
Qhumaing13 小时前
html第一个网页
网络·html·html5
荆州克莱14 小时前
[FE] React 初窥门径(四):React 组件的加载过程(render 阶段)
spring boot·spring·spring cloud·css3·技术
前端Hardy17 小时前
HTML&CSS:爱上班的猫咪
前端·javascript·css·vue.js·html
聚宝盆_20 小时前
【css flex 多行均分有间隙布局】
前端·css
零希20 小时前
CSS元素类型(二)
前端·javascript·css
煎饼果子呀20 小时前
css-flex布局属性
开发语言·前端·css·html5