动画悬停按钮

下载代码

html

css

分享到微信朋友圈

html

<div class="content">
  <h1>Bubble hover effect</h1>
  <div class="button_container">
      <div class="button_su">
        <span class="su_button_circle">
        </span>
        <a href="#" class="button_su_inner">
          <span class="button_text_container">
            Simple button
          </span>
        </a>
      </div>

<div class="button_su">
        <span class="su_button_circle">
        </span>
        <a href="#" class="button_su_inner">
          <span class="button_text_container">
            Another button
          </span>
        </a>
      </div>

<div class="button_su">
        <span class="su_button_circle">
        </span>
        <a href="#" class="button_su_inner">
          <span class="button_text_container">
            A third button
          </span>
        </a>
      </div>

<div class="button_su">
        <span class="su_button_circle">
        </span>
        <a href="#" class="button_su_inner">
          <span class="button_text_container">
            A forth button
          </span>
        </a>
      </div>
  </div>
  <p class="credit">By Sammy Helali</p>
</div>

css

body {
  font-family: 'Inconsolata', sans-serif;
  background: #2a364f;
}

h1{
  text-align: center;
  color: rgba(255,255,255,0.8);
}

.credit{
  text-align: center;
  color: rgba(255,255,255,0.4);

}

.content{
  padding-top: 45px;
  padding-bottom: 20px;
}

.button_container{
    width: 176px;
    margin: 0 auto;
    margin-top: 30px;
    padding-top: 40px;
}

.button_su{
  overflow: hidden;
  position: relative;
  display: inline-block;
  border-radius: 3px;
  margin-bottom: 30px;
}

.su_button_circle{
  background-color: red;
  border-radius: 1000px;
  position: absolute;
  left:0;
  top:0;
  width: 0px;
  height: 0px;
  margin-left: 0px;
  margin-top: 0px;
  pointer-events: none;
  /*animation-timing-function: ease-in-out; */
}

.button_su_inner{
    display: inline-block;
    background: #F8B627;
    color: #F4F4F4;
    font-size: 16px;
    font-weight: normal;
    width: 132px;
    text-align: center;
    border-radius: 3px;
    transition: 400ms;
    text-decoration: none;
    padding: 22px;
    z-index: 100000;
}

.button_text_container{
   position:relative;
   z-index: 10000;
}

.explode-circle {
   animation: explode 0.5s forwards;

}

.desplode-circle{
   animation: desplode 0.5s forwards;
}

@keyframes explode {
  0% {
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    background-color: rgba(42, 53, 80,0.2);
  }
  100% {
    width: 400px;
    height: 400px;
    margin-left: -200px;
    margin-top: -200px;
    background-color: rgba(20, 180, 87,0.8);
  }
}

@keyframes desplode {
  0% {
    width: 400px;
    height: 400px;
    margin-left: -200px;
    margin-top: -200px;
    background-color: rgba(20, 180, 87,0.8);
  }
  100% {
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    background-color: rgba(129, 80, 108,0.6);
  }
}

JavaScript

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