按钮悬停动画

下载代码

html

css

分享到微信朋友圈

html

<h1>Ten hover effects</h1>

<div class="clearfix" id="contentBox">
  <div id="first" class="buttonBox">
    <button>Hover One</button>
    <div class="border"></div>
    <div class="border"></div>
  </div>

<div id="second" class="buttonBox">
    <button>Hover Two</button>
    <div class="border"></div>
    <div class="border"></div>
  </div>

<div id="third" class="buttonBox">
    <button>Hover Three</button>
    <div class="border"></div>
    <div class="border"></div>
    <div class="border"></div>
    <div class="border"></div>
  </div>

<div id="fourth" class="buttonBox">
    <button>Hover Four</button>
    <div class="border"></div>
    <div class="border"></div>
    <div class="border"></div>
    <div class="border"></div>
  </div>

<div id="fifth" class="buttonBox">
    <button>Hover Five</button>
  </div>

<div id="sixth" class="buttonBox">
    <button>Hover Six</button>
    <div class="border"></div>
    <div class="border"></div>
    <div class="border"></div>
    <div class="border"></div>
  </div>

<div id="seventh" class="buttonBox">
    <button>Hover Seven</button>
  </div>

<div id="eighth" class="buttonBox">
    <button>Hover Eight</button>
  </div>

<div id="ninth" class="buttonBox">
    <button>Hover Nine</button>
  </div>

css

html{
  background-color:#ff4545;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  padding:1vw;
}

.clearfix:before,
.clearfix:after{
  content:" ";
  display: table;
}

.clearfix:after{
  clear:both;
}

h1{
  color:white;
  margin:30px auto;
  width:50%;
  text-align:center;
  padding:20px;
  text-transform:uppercase;
  font-size:3vw;
  letter-spacing:5px;
  border-top:1px solid;
  border-bottom:1px solid;
}

#contentBox{
  width:90%;
  margin:0 auto;
}

.buttonBox{
  position:relative;
  float:left;
  margin:3.5vw 0 0 3.5vw;
  width:15%;
}

button{
  width:100%;
  height:80px;
  position:relative;
  background:rgba(255, 255, 255, .27);
  text-transform:uppercase;
  color:white;
  font-weight:700;
  letter-spacing:1px;
  border:none;
  font-size:15px;
  outline:none;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

/* FIRST BUTTON */

.border{
    position:absolute;
    background:none;
    transition:all .5s ease-in-out;
}

#first>.border:nth-of-type(1){
  top:0;
  left:0;
  border-left:1px solid white;
  border-top:1px solid white;
  width:30px;
  height:30px;
}

#first>.border:nth-of-type(2){
  bottom:0;
  right:0;
  border-right:1px solid white;
  border-bottom:1px solid white;
  width:30px;
  height:30px;
}

#first:hover .border{
  width:102%;
  height:105%;
}

/* SECOND BUTTON */

#second>.border:nth-of-type(1){
  top:0;
  left:50%;
  width:0;
  border-top:1px solid white;
  transition:width .5s ease-in-out, transform 1s ease-in-out;
}

#second>.border:nth-of-type(2){
  bottom:0;
  left:50%;
  width:0;
  border-bottom:1px solid white;
  transition:width .5s ease-in-out, transform 1s ease-in-out;
}

#second:hover .border{
  transform:translate(-50%, 0);
  width:100%;
  transition:width .8s ease-in-out, transform .3s ease-in-out;
}

/* THIRD BUTTON */

#third>.border:nth-of-type(1){
  top:0;
  left:0;
  border-top:1px solid white;
  width:100%;
  height:100%;
}

#third>.border:nth-of-type(2){
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  border-bottom:1px solid white;
}

#third>.border:nth-of-type(3){
  left:0;
  top:0;
  height:100%;
  width:100%;
  border-left:1px solid white;
}

#third>.border:nth-of-type(4){
  top:0;
  right:0;
  height:100%;
  width:100%;
  border-right:1px solid white;
}

#third:hover .border:nth-of-type(1){
  transform:translate(0, 99%);
}

#third:hover .border:nth-of-type(2){
  transform:translate(0, -99%);
}

#third:hover .border:nth-of-type(3){
  transform:translate(99%, 0);
}

#third:hover .border:nth-of-type(4){
  transform:translate(-99%, 0);
}

/* FOURTH BUTTON */

#fourth>.border:nth-of-type(1){
  top:0;
  left:0;
  width:0;
  height:0;
  border-top:1px solid white;
}

#fourth>.border:nth-of-type(2){
  top:0;
  right:0;
  width:10px;
  height:0;
  border-right:1px solid white;
}

#fourth>.border:nth-of-type(3){
  bottom:0;
  right:0;
  width:0;
  height:0;
  border-bottom:1px solid white;
}

#fourth>.border:nth-of-type(4){
  bottom:0;
  left:0;
  width:0;
  height:0;
  border-left:1px solid white;
}

#fourth:hover .border:nth-of-type(1){
  width:100%;
}

#fourth:hover .border:nth-of-type(2){
  height:80px;
}

#fourth:hover .border:nth-of-type(3){
  width:100%;
}

#fourth:hover .border:nth-of-type(4){
  height:80px;
}

/* FIFTH BUTTON */

#fifth{
  overflow:hidden;
}

#fifth:before{
  content:" ";
  display:block;
  width:200px;
  height:80px;
  background:rgba(255, 255, 255, .1);
  position:absolute;
  top:-10px;
  left:-200px;
  transform:rotate(-45deg);
  transition:all .15s ease-in-out;  
}

#fifth:hover:before{
  margin-left:300%;
}

/* SIXTH BUTTON */

#sixth{
  overflow:hidden;
}

#sixth>button{
  z-index:1;
  transition:color .5s ease;
}

#sixth .border{
  z-index:0;
  background:white;
  width:30px;
  height:30px;
  transform:rotate(45deg);
}

#sixth>.border:nth-of-type(1){
  top:-35px;
  left:-30px; 
}

#sixth>.border:nth-of-type(2){
  top:-35px;
  right:-30px;
}

#sixth>.border:nth-of-type(3){
  bottom:-35px;
  left:-30px;
}

#sixth>.border:nth-of-type(4){
  bottom:-35px;
  right:-30px;
}

#sixth:hover .border{
  transform:scale(15.7) rotate(45deg);
}

#sixth:hover button{
  color:#ff9292;
  transition:color 2s ease;
}

/* SEVENTH BUTTON */

#seventh>button{
  border:1px solid rgba(255, 255, 255, 0);
  transition:all .5s ease-in-out;
}

#seventh:hover button{
  border:1px solid white;
  font-size:20px;
}

/* EIGHTH BUTTON */

#eighth>button{
  transition:all .5s ease-in-out;
}

#eighth:hover button{
  text-shadow:
    0 0 10px rgba(255,255,255, 1),
    0 0 50px rgba(255, 255, 255, .8),
    0 0 75px rgba(255, 255, 255, .6),
    0 0 76px rgba(255, 255, 255, .4),
    0 0 77px rgba(255, 255, 255, .5),
    0 0 78px rgba(255, 255, 255, .4),
    0 0 79px rgba(255, 255, 255, .3),
    0 0 80px rgba(255, 255, 255, .2),
    0 0 85px rgba(255, 255, 255, .1);
}

/* NINTH HOVER */

#ninth>button{
  transition:all .5s ease-in-out;
}

#ninth:hover button{
  background:white;
  color:#ff9292;
}

/* TENTH BUTTON */

#tenth>button{
  letter-spacing:0;
}

#tenth span{
  letter-spacing:0;
  display:inline-block;
  position:relative;
  width:8px;
  transition:all .5s ease-in-out;
}

#tenth span:nth-of-type(4){
  width:5px;
}

#tenth span:nth-of-type(6){
  width:1px;
}

#tenth span:nth-of-type(8){
  width:4px;
}

#tenth:hover span:nth-of-type(1){
  animation:h .5s;
}

#tenth:hover span:nth-of-type(2){
  animation:o .5s;
}

#tenth:hover span:nth-of-type(3){
  animation:v .5s;
}

#tenth:hover span:nth-of-type(4){
  animation:e .5s;
}

#tenth:hover span:nth-of-type(5){
  animation:r .5s;
}

#tenth:hover span:nth-of-type(7){
  animation:t .5s;
}

#tenth:hover span:nth-of-type(8){
  animation:e .5s;
}

#tenth:hover span:nth-of-type(9){
  animation:n .5s;
}

@keyframes h{
  0%{transform:translate(0, 0);}
  50%{transform:translate(50px, 5px);}
  75%{transform:translate(5px, 5px);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

@keyframes o{
  0%{transform:translate(0, 0);}
  25%{transform:translate(-4px, 0);}
  50%{transform:translate(3px, 4px);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

@keyframes v{
  0%{transform:translate(0, 0);}
  20%{transform:rotate(360deg);}
  50%{transform:scale(2);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

@keyframes e{
  0%{transform:translate(0, 0);}
  20%{transform:translate(-10px, -2px);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

@keyframes r{
  0%{transform:translate(0, 0);}
  20%{transform:translate(0, 10px);}
  80%{transform:translate(0, 32px);}
  100%{transform:translate(0, 0);}
}

@keyframes t{
  0%{transform:translate(0, 0);}
  20%{transform:translate(0, -10px);}
  40%{transform:translate(0, 0);}
  60%{transform:translate(0, -10px);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

@keyframes n{
  0%{transform:translate(0, 0);}
  50%{transform:skewY(50deg);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

JavaScript

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